Improved Controls CSS

src/web/App.mjs

@@ -589,6 +589,7 @@ class App {
         this.manager.recipe.adjustWidth();
         this.manager.input.calcMaxTabs();
         this.manager.output.calcMaxTabs();
+        this.manager.controls.calcControlsHeight();
     }
 
 

src/web/stylesheets/layout/_controls.css

@@ -6,27 +6,20 @@
  * @license Apache-2.0
  */
 
-:root {
-    --controls-height: 75px;
-}
-
 #controls {
     position: absolute;
     width: 100%;
-    height: var(--controls-height);
     bottom: 0;
-    padding: 0;
+    padding: 10px 0;
-    padding-top: 12px;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
 }
 
 #controls-content {
     position: relative;
-    left: 50%;
+    display: flex;
-    top: 50%;
+    flex-flow: row nowrap;
-    transform: translate(-50%, -50%);
+    align-items: center;
-    transform-origin: center left;
 }
 
 #auto-bake-label {
@@ -56,6 +49,7 @@
 
 #controls .btn {
     border-radius: 30px;
+    margin: 0;
 }
 
 .output-maximised .hide-on-maximised-output {

src/web/stylesheets/layout/_recipe.css

@@ -7,7 +7,6 @@
  */
 
 #rec-list {
-    bottom: var(--controls-height);
     overflow: auto;
 }
 

src/web/waiters/ControlsWaiter.mjs

@@ -410,6 +410,17 @@ ${navigator.userAgent}
         }
     }
 
+    /**
+     * Calculates the height of the controls area and adjusts the recipe
+     * height accordingly.
+     */
+    calcControlsHeight() {
+        const controls = document.getElementById("controls"),
+            recList = document.getElementById("rec-list");
+
+        recList.style.bottom = controls.clientHeight + "px";
+    }
+
 }
 
 export default ControlsWaiter;