[gchq#181] set mobile ops-dropdown to fill all space except ops and banner. No need for the controls at this point while scrolling the ops

Author: valdelaseras

src/web/App.mjs

@@ -906,15 +906,15 @@ class App {
         const controlsHeight = 50;
         const operationsHeight = 80;
 
-        const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight);
+        const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight - 1); // - 1 is accounting for a border
 
         // equally divide among recipe, input and output
         ["recipe", "input", "output"].forEach(( div ) => {
             document.getElementById(div).style.height = `${remainingSpace/3}px`;
         });
 
         // set the ops-dropdown height
-        document.getElementById("operations-dropdown").style.maxHeight = `${remainingSpace}px`;
+        document.getElementById("operations-dropdown").style.maxHeight = `${window.innerHeight - (bannerHeight+operationsHeight)}px`;
     }
 }
 

src/web/TODO.md

@@ -7,6 +7,8 @@
 - shannon entropy thingies
 - maybe a bit annoying that the fav cat opens whenever you add a new fav via icon-fav-click on mobile
 - backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe is expanded and double click the window to fs > resolve. Reset layout
+- remove tabs on window resizing large to small?
+- drag and drop from op to rec on desktop only working once
 
 ### JS:
 - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original

src/web/stylesheets/components/_controls.css

@@ -8,16 +8,11 @@
 
 #controls {
     width: 100%;
+    border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
     overflow: hidden;
 }
 
-@media only screen and (min-width: 768px) {
-    #controls {
-        border-top: 1px solid var(--primary-border-colour);
-    }
-}
-
 #controls-content {
     display: flex;
     padding: 10px 0;