From bc949b47d918fd77142c7fd22c086f5795d1a522 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Fri, 1 Jul 2022 12:01:48 +0100
Subject: [PATCH] Improved Controls CSS

---
 src/web/App.mjs                          |  1 +
 src/web/stylesheets/layout/_controls.css | 16 +++++-----------
 src/web/stylesheets/layout/_recipe.css   |  1 -
 src/web/waiters/ControlsWaiter.mjs       | 11 +++++++++++
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/web/App.mjs b/src/web/App.mjs
index 9d4813e0..2d45d1f1 100755
--- a/src/web/App.mjs
+++ b/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();
     }
 
 
diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css
index c410704b..1edc41b5 100755
--- a/src/web/stylesheets/layout/_controls.css
+++ b/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-top: 12px;
+    padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
 }
 
 #controls-content {
     position: relative;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transform-origin: center left;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
 #auto-bake-label {
@@ -56,6 +49,7 @@
 
 #controls .btn {
     border-radius: 30px;
+    margin: 0;
 }
 
 .output-maximised .hide-on-maximised-output {
diff --git a/src/web/stylesheets/layout/_recipe.css b/src/web/stylesheets/layout/_recipe.css
index bd70d10f..339da074 100755
--- a/src/web/stylesheets/layout/_recipe.css
+++ b/src/web/stylesheets/layout/_recipe.css
@@ -7,7 +7,6 @@
  */
 
 #rec-list {
-    bottom: var(--controls-height);
     overflow: auto;
 }
 
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index 426107bb..2879089a 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/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;