tidy up code, add controls-height var and implement across stylesheets, start work on operation/category lists

src/web/stylesheets/components/_list.css

@@ -40,4 +40,4 @@
     margin: 0 !important;
     border-radius: 0 !important;
     border: none;
-}
+}

src/web/stylesheets/components/_operation.css

@@ -7,7 +7,7 @@
  */
 
 .operation {
-    cursor: grab;
+    cursor: pointer;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,6 +18,12 @@
     border-right: none;
 }
 
+@media only screen and ( min-width: 768px ) {
+    .operation {
+        cursor: grab;
+    }
+}
+
 #rec-list .operation {
     padding: 14px;
 }
@@ -320,3 +326,22 @@ input.toggle-string {
     color: var(--disabled-font-colour) !important;
     background-color: var(--disabled-border-colour) !important;
 }
+
+/* ================ experimentation ================ */
+.foo {
+    position: relative;
+}
+
+#search-results,
+#categories {
+    position: absolute;
+    top: 40px; /* the height of the search input */
+    left: 0;
+    right: 0;
+    z-index: 10;
+    height: auto;
+    max-height: 60vh;
+    overflow: scroll;
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+

src/web/stylesheets/layout/_controls.css

@@ -13,6 +13,8 @@
     padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
+    height: var(--controls-height);
+    overflow: hidden;
 }
 
 #controls-content {
@@ -31,15 +33,6 @@
     color: var(--primary-font-colour);
     font-size: 14px;
     cursor: pointer;
-    /*line-height: 0;*/
-}
-
-#auto-bake {
-    position: relative;
-    width: auto;
-    height: auto;
-    opacity: 1;
-    z-index: initial;
 }
 
 #auto-bake-label .check,

src/web/stylesheets/layout/_structure.css

@@ -10,10 +10,6 @@ body {
     overflow: hidden;
 }
 
-#workspace-wrapper {
-    margin-top: var(--banner-height);
-}
-
 #content-wrapper {
     position: absolute;
     top: 0;
@@ -22,19 +18,27 @@ body {
     left: 0;
 }
 
-#recipe,
-#input .cm-scroller,
-#output .cm-scroller {
-    overflow-y: auto;
+/*@TODO: test with keyboard popping up because that messes with the viewheight probably*/
+
+#workspace-wrapper {
+    /* The workspaces' available height minus the top banner and control element at the bottom */
+    height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) );
+    margin-top: var(--banner-height);
+}
+
+#operations {
+    height: auto;
 }
 
 #recipe {
     height: 15vh;
+    overflow-y: auto;
 }
 
 #input .cm-scroller,
 #output .cm-scroller {
     height: 20vh;
+    overflow-y: auto;
 }
 
 #operations .title,

src/web/stylesheets/themes/_classic.css

@@ -36,7 +36,6 @@
     --banner-font-colour: #468847;
     --banner-bg-colour: #dff0d8;
     --banner-url-colour: #1976d2;
-    --banner-height: 40px;
 
     --category-list-font-colour: #1976d2;
 
@@ -133,5 +132,7 @@
     --code-font-colour: #c7254e;
     --input-highlight-colour: #1976d2;
     --input-border-colour: #424242;
+    --banner-height: 40px;
+    --controls-height: 70px;
 }