diff --git a/src/web/App.mjs b/src/web/App.mjs
index d1d532a1..c59902d7 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -60,6 +60,7 @@ class App {
         document.dispatchEvent(this.manager.appstart);
 
         this.initialiseSplitter();
+        this.adjustComponentSizes();
         this.setCompileMessage();
         this.loadLocalStorage();
         this.populateOperationsList();
diff --git a/src/web/TODO.md b/src/web/TODO.md
index 92f3bf55..1b0aa5e0 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -5,6 +5,7 @@
 
 ### Desktop UI:
 - restore desktop UI
+- `search-results` should really be at the top once input, with `categories` below it
 
 ### Mobile UI:
 - bootstrap native 'x' in `input[type="search"]` should clear input value and
@@ -13,6 +14,7 @@
 - on invalid search input ( and no results ), categories should be displayed
 - test with keyboard popping up because that messes with the viewheights on mobile probably
 - make sure panels in `workspace-wrapper` grow and add up to 100%
+- see how to make it work with `controls` nested in `recipe`
 
 ### General UI:
 - fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 65e2074c..fd07c159 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -152,15 +152,9 @@
         </button>
 
         <div id="content-wrapper">
-            <!-- banner -->
-            <div id="banner" class="row">
+            <div id="banner">
                 <div>
-                    <a href="#"
-                       class="banner-link"
-                       data-toggle="modal"
-                       data-target="#download-modal"
-                       data-help-title="Downloading CyberChef"
-                       data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">
+                    <a href="#" class="banner-link" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">
                         <span>Download CyberChef</span>
                         <i class="material-icons">file_download</i>
                     </a>
@@ -198,11 +192,9 @@
                     </a>
                 </div>
             </div>
-
             <div id="workspace-wrapper">
                 <!--operations-->
-                <div id="operations"
-                     class="no-select">
+                <div id="operations" class="split split-horizontal no-select">
                     <div class="title no-select"
                          data-help-title="Operations list"
                          data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
@@ -235,7 +227,7 @@
                 </div>
 
                 <!--recipe-->
-                <div id="recipe" class="no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">
+                <div id="recipe" class="split split-horizontal no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">
                     <div class="title no-select">
                         Recipe
                         <span class="pane-controls hide-on-maximised-output">
@@ -252,13 +244,35 @@
                     </div>
                     <!--selected recipes list-->
                     <ul id="rec-list" class="list-area no-select"></ul>
+
+                    <!--controls-->
+                    <div id="controls" class="no-select hide-on-maximised-output">
+                        <div id="controls-content">
+                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
+                                Step
+                            </button>
+
+                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
+                                <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
+                                <span>Bake!</span>
+                            </button>
+
+                            <div class="form-group" style="display: contents;">
+                                <div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
+                                    <label id="auto-bake-label">
+                                        <input type="checkbox" checked="checked" id="auto-bake">
+                                        <br>Auto Bake
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <!--IO: input/output-->
-                <div id="IO">
-
+                <div id="IO" class="split split-horizontal">
                     <!--input-->
-                    <div id="input" class="no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">
+                    <div id="input" class="split no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <span class="pane-controls">
@@ -313,9 +327,7 @@
                     </div>
 
                     <!--output-->
-                    <div id="output"
-                         data-help-title="Output pane"
-                         data-help="<p>This pane displays the results of the Recipe after it has processed your Input.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p><p>When copying these characters from the Output, the original byte value should be copied into your clipboard, rather than the control character picture itself.</p>">
+                    <div id="output" class="split" data-help-title="Output pane" data-help="<p>This pane displays the results of the Recipe after it has processed your Input.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p><p>When copying these characters from the Output, the original byte value should be copied into your clipboard, rather than the control character picture itself.</p>">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
                             <div class="flex-row-reverse">
@@ -380,29 +392,6 @@
                         </div>
                     </div>
                 </div>
-
-                <!--controls-->
-                <div id="controls" class="no-select hide-on-maximised-output">
-                    <div id="controls-content">
-                        <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
-                            Step
-                        </button>
-
-                        <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
-                            <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
-                            <span>Bake!</span>
-                        </button>
-
-                        <div class="form-group" style="display: contents;">
-                            <div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
-                                <label id="auto-bake-label">
-                                    <input type="checkbox" checked="checked" id="auto-bake">
-                                    <br>Auto Bake
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
 
diff --git a/src/web/stylesheets/components/_banner.css b/src/web/stylesheets/components/_banner.css
index c5cf5070..2acd5362 100644
--- a/src/web/stylesheets/components/_banner.css
+++ b/src/web/stylesheets/components/_banner.css
@@ -7,13 +7,14 @@
  */
 
 #banner {
+    display: flex;
+    justify-content: space-between;
     padding-left: 12px;
     padding-right: 4px;
     line-height: var(--banner-height);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
     border-bottom: 1px solid var(--primary-border-colour);
-    justify-content: space-between; /* flex is applied through .row on the banner element */
 }
 
 #banner i {
@@ -21,6 +22,17 @@
     padding-right: 10px;
 }
 
+
+/* Notice wrapper */
+#notice-wrapper {
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+/* Banner links ( options, about / support ) */
 .banner-link {
     color: var(--banner-url-colour);
 }
@@ -35,9 +47,5 @@
     }
 }
 
-#notice-wrapper {
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+
+
diff --git a/src/web/stylesheets/components/_controls.css b/src/web/stylesheets/components/_controls.css
index 44f59b81..97777575 100644
--- a/src/web/stylesheets/components/_controls.css
+++ b/src/web/stylesheets/components/_controls.css
@@ -11,6 +11,9 @@
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
     overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
 }
 
 #controls-content {
diff --git a/src/web/stylesheets/components/operations/_categories.css b/src/web/stylesheets/components/operations/_categories.css
index e59baf46..4402e4b1 100644
--- a/src/web/stylesheets/components/operations/_categories.css
+++ b/src/web/stylesheets/components/operations/_categories.css
@@ -36,8 +36,7 @@
 #categories {
     position: absolute;
     top: 40px; /* the height of the input[type="search"] with pos relative */
-    left: 0;
-    right: 0;
+    width: 100%;
     height: auto;
     max-height: 60vh;
     overflow: scroll;
diff --git a/src/web/stylesheets/components/operations/_search.css b/src/web/stylesheets/components/operations/_search.css
index 3a49bdcf..d78758ca 100644
--- a/src/web/stylesheets/components/operations/_search.css
+++ b/src/web/stylesheets/components/operations/_search.css
@@ -9,8 +9,7 @@
 #search-results {
     position: absolute;
     top: 40px; /* the height of the input[type="search"] with pos relative */
-    left: 0;
-    right: 0;
+    width: 100%;
     height: auto;
     max-height: 60vh;
     overflow: scroll;
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 757f2572..46dd2533 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -52,6 +52,38 @@ body {
 }
 
 @media only screen and ( min-width: 768px ) {
+    #workspace-wrapper {
+        height: calc( 100vh - var(--banner-height));
+    }
+
+    #categories,
+    #search-results {
+        max-height: max-content;
+        overflow: revert;
+    }
+
+    #operations, #recipe, #IO {
+        height: 100%;
+    }
+
+    #operations.split {
+        overflow: auto;
+    }
+
+    .split {
+        box-sizing: border-box;
+        /* overflow: auto; */
+        /* Removed to enable Background Magic button pulse to overflow.
+        Replace this rule if it seems to be causing problems. */
+        position: relative;
+    }
+
+    .gutter.gutter-horizontal,
+    .split.split-horizontal {
+        float: left;
+        height: 100%;
+    }
+
     .gutter {
         background-color: var(--secondary-border-colour);
         background-repeat: no-repeat;