[#181] handle the correct resetting of layouts in any maximised pane situation, i.e. window resizing while panels are maximised etc. Prevent mobile keyboard popup window resize events to trigger layout resetting when panes are maximised, use JS to calculate the innerHeight available for mobile devices as they are of variable / unreliable / inconsistent heights

src/web/stylesheets/components/_controls.css

@@ -7,8 +7,6 @@
  */
 
 #controls {
-    position: fixed;
-    bottom: 0;
     width: 100%;
     padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);

src/web/stylesheets/components/io/_status-bar.css

@@ -1,5 +1,4 @@
 /* Status bar */
-
 .cm-panel input::placeholder {
     font-size: 12px !important;
 }
@@ -7,7 +6,6 @@
 .ͼ2 .cm-panels,
 .ͼ2 .cm-side-panels {
     background-color: var(--secondary-background-colour);
-    /*border-color: var(--primary-border-colour);*/
     color: var(--primary-font-colour);
     border-bottom: 1px solid var(--primary-border-colour);
 }
@@ -50,6 +48,7 @@
     display: inline-block;
 }
 
+/*@TODO: update this one for mobile*/
 /* Dropup content (Hidden by Default) */
 .cm-status-bar-select-content {
     display: none;
@@ -97,6 +96,8 @@
     display: block;
 }
 
+
+/*@TODO: and update this one for mobile*/
 .cm-status-bar-select-scroll {
     overflow-y: auto;
     max-height: 300px;

src/web/stylesheets/components/operations/_operations.css

@@ -15,7 +15,7 @@
 
 #operations-dropdown {
     position: absolute;
-    top: 40px; /* the height of the input[type="search"] with pos relative */
+    top: 41px;
     width: 100%;
     height: auto;
     max-height: 60vh;

src/web/stylesheets/layout/_structure.css

@@ -8,8 +8,6 @@
 
 #banner { height: var(--banner-height); }
 #operations { height: var(--operations-height); }
-#recipe { height: var(--recipe-height); }
-#IO { height: var(--io-height); }
 #controls { height: var(--controls-height); }
 
 #banner,
@@ -25,24 +23,18 @@
 }
 
 #workspace-wrapper {
-    height: var(--workspace-height);
     margin-top: var(--banner-height);
 }
 
 #controls {
+    position: fixed;
     bottom: 0;
 }
 
-#IO {
-    padding-bottom: var(--controls-height);
-}
-
 #recipe.maximised-pane,
 #input.maximised-pane,
 #output.maximised-pane {
     position: fixed;
-    min-height: calc( 100vh - var(--banner-height ));
-    height: auto;
     top: var(--banner-height);
     left: 0;
     right: 0;
@@ -54,10 +46,6 @@
 }
 
 @media only screen and ( min-width: 768px ) {
-    #IO {
-        padding-bottom: 0;
-    }
-
     #recipe {
         padding-bottom: var(--controls-height);
     }
@@ -67,7 +55,7 @@
     }
 
     #workspace-wrapper {
-        height: calc( 100vh - var(--banner-height));
+        height: calc(100vh - var(--banner-height));
     }
 
     #operations-dropdown {

src/web/stylesheets/themes/_structure.css

@@ -1,9 +1,17 @@
 :root {
+    /* Fixed heights */
     --banner-height: 40px;
     --controls-height: 70px;
-    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
-    --recipe-height: 22vh;
-    --operations-height: 89px;
-    /* io gets the remaining space */
-    --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
+    /*initial mobile height*/
+    --operations-height: 90px;
 }
+
+/**
+ * A note:
+ *
+ * Heights of #recipe, #input and #output are set programmatically
+ * in App.js > divideAvailableSpace(), please see the docs for that
+ * function for more information.
+ */
+
+