diff --git a/src/web/App.mjs b/src/web/App.mjs
index b875743c..c5202be8 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -333,13 +333,7 @@ class App {
     }
 
     /**
-     * Set mobile layout.
-     *
-     * 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 and rebuilding the splitters. Now setDesktopLayout
-     * and setMobileLayout can be called on window resizing events and the switch
-     * gets handled smoothly.
+     * Set mobile layout
      */
     setMobileLayout() {
         if (this.columnSplitter) this.columnSplitter.destroy();
@@ -353,6 +347,7 @@ class App {
         });
 
         this.ioSplitter = Split(["#input", "#output"], {
+            sizes: [40,60],
             direction: "vertical",
             gutterSize: 0,
         });
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index e0518a01..dbd028f5 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -10,7 +10,7 @@
     --banner-height: 40px;
     --controls-height: 70px;
     --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
-    --recipe-height: 16vh;
+    --recipe-height: 38vh;
     --operations-height: 89px;
     --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
 }