diff --git a/src/web/App.mjs b/src/web/App.mjs
index 1957e797..a3556aa1 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -336,8 +336,9 @@ class App {
      *
      * A note: there is some code repetition here ( re setDesktopLayout ),
      * but I found some lingering gutters or odd behaviour on window resizing that is
-     * resolved by always destroying splitters. Now setDesktopLayout and setMobileLayout
-     * can be called on window resizing events and the switch gets handled smoothly.
+     * resolved by always destroying and rebuilding the splitters. Now setDesktopLayout
+     * and setMobileLayout can be called on window resizing events and the switch
+     * gets handled smoothly.
      */
     setMobileLayout() {
         if (this.columnSplitter) this.columnSplitter.destroy();
@@ -353,7 +354,6 @@ class App {
         this.ioSplitter = Split(["#input", "#output"], {
             direction: "vertical",
             gutterSize: 0,
-            minSize: [50, 50]
         });
     }
 
diff --git a/src/web/TODO.md b/src/web/TODO.md
index 217814f1..28032e0a 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -3,15 +3,17 @@
 
 ---
 
-### Mobile UI:
-#### Operations:
+#### Mobile UI ( on real device ):
 - on mobile UI, there is almost no visual feedback when adding an operation to the recipe list. Since the recipe list is not visible like on desktop, this is very confusing UX
+- adding an operation only works with drag and drop, not on double tap or the like. This todo is related to the remaining mobile UI one.
+  Dragging and dropping won't be an option on mobile, because then you can't scroll the operations list. I'm thinking to add
+  operations on mobile via double tap, then add a checkmark at the right end of the op list item. Remove an item directly in the list via
+  another double tap ( or clearing the recipe list via trash icon as normal ).
+- the above causes a problem for adding favourites though, there is some UX difficulty here.
 
-#### Mobile UI on real device:
 - test *thoroughly* with keyboard popping up because that messes with view-heights on mobile probably and might make it a very frustrating experience
 - test drag and drop etc. Regular mobile events / UX
 - view-heights not correct due to variable taskbar on mobile devices
-- adding an operation only works with drag and drop, not on double tap or the like. This todo is related to the remaining mobile UI one ( I think maybe add a checkmark on double tap, then remove it again on double tap or when recipe list gets cleared )
 
 ### Desktop UI:
 ### General UI:
@@ -22,7 +24,6 @@
 
 ### Misc:
 - remove ln 215 in gruntfile ( for mobile testing )
-- comb through CSS and improve organisation for better DevX
-- write / complete UI tests
+- comb through CSS and improve organisation for better DevX. Ask repo owners to open another issue perhaps and just redo all of the stylesheets ( preferably with SASS )
 - delete this file when done :)
 
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 6ccd1c92..947ea79f 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -238,10 +238,7 @@
                             </button>
                         </span>
                     </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>">
diff --git a/src/web/stylesheets/components/io/_io.css b/src/web/stylesheets/components/io/_io.css
index dc941a9f..4374097b 100755
--- a/src/web/stylesheets/components/io/_io.css
+++ b/src/web/stylesheets/components/io/_io.css
@@ -25,12 +25,12 @@ label[for="output-text"] {
 
 #input .cm-scroller,
 #output .cm-scroller {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 #input .cm-scroller:hover,
 #output .cm-scroller:hover {
-    cursor: pointer;
+    cursor: initial;
 }
 
 #output-text.html-output .cm-content,
@@ -79,7 +79,6 @@ label[for="output-text"] {
     display: flex;
     justify-content: center;
     align-items: center;
-
     transition: all 0.5s ease;
 }
 
diff --git a/src/web/stylesheets/components/io/_tabs.css b/src/web/stylesheets/components/io/_tabs.css
index fcb3abc6..2f3f1448 100644
--- a/src/web/stylesheets/components/io/_tabs.css
+++ b/src/web/stylesheets/components/io/_tabs.css
@@ -21,7 +21,7 @@
     width: 100%;
     min-width: 120px;
     float: left;
-    padding: 0px;
+    padding: 0;
     text-align: center;
     border-right: 1px solid var(--primary-border-colour);
     height: var(--tab-height);
diff --git a/src/web/stylesheets/components/operations/_categories.css b/src/web/stylesheets/components/operations/_categories.css
index a5a31a31..87d8e676 100644
--- a/src/web/stylesheets/components/operations/_categories.css
+++ b/src/web/stylesheets/components/operations/_categories.css
@@ -2,6 +2,9 @@
  * Operations - Categories list
  */
 
+#categories {
+    border-top: 1px solid var(--primary-border-colour);
+}
 
 .category-title {
     display: flex;
diff --git a/src/web/stylesheets/components/operations/_search.css b/src/web/stylesheets/components/operations/_search.css
index ce2b96eb..aaf5af8b 100644
--- a/src/web/stylesheets/components/operations/_search.css
+++ b/src/web/stylesheets/components/operations/_search.css
@@ -7,3 +7,4 @@
     padding-right: 10px;
     background-image: none;
 }
+
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 31cecb64..e0518a01 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -6,20 +6,15 @@
  * @license Apache-2.0
  */
 
-/* Together, they make up 100vh */
 :root {
     --banner-height: 40px;
     --controls-height: 70px;
-    --workspace-height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)));;
-    --recipe-height: 20vh;
-    --operations-height: 88px;
+    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
+    --recipe-height: 16vh;
+    --operations-height: 89px;
     --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
 }
 
-body {
-    overflow: hidden;
-}
-
 #banner,
 #content-wrapper {
     position: absolute;
@@ -46,7 +41,23 @@ body {
     bottom: 0;
 }
 
+#IO {
+    padding-bottom: var(--controls-height);
+}
+
 @media only screen and ( min-width: 768px ) {
+    #IO {
+        padding-bottom: 0;
+    }
+
+    #recipe {
+        padding-bottom: var(--controls-height);
+    }
+
+    #recipe .list-area  {
+        bottom: var(--controls-height);
+    }
+
     #workspace-wrapper {
         height: calc( 100vh - var(--banner-height));
     }