From a661b2f48d73f6fd623d354f2d2cb469f2bb8edf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Tue, 28 Apr 2026 15:09:34 +0200
Subject: [PATCH] fix: equal-height settings cards and full-width volume slider

- dashboard-grid uses align-items: stretch so both cards match height
- .card is now a flex column; .control-actions uses margin-top: auto to
  pin the save button row to the bottom of each card
- Volume slider label gets grid-column: 1 / -1 via .span-full so it
  fills the full card width instead of sharing a column with width/height
---
 src/main/resources/static/css/styles.css    | 15 +++++++++++++--
 src/main/resources/templates/dashboard.html |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 2f844d4..7be4df3 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -1043,7 +1043,7 @@ button:disabled:hover {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
-    align-items: start;
+    align-items: stretch;
 }
 
 .dashboard-span-full {
@@ -1303,6 +1303,8 @@ button:disabled:hover {
     border: 1px solid var(--color-border);
     border-radius: 14px;
     padding: 18px;
+    display: flex;
+    flex-direction: column;
 }
 
 .card-header {
@@ -2184,6 +2186,14 @@ button:disabled:hover {
     margin-top: 12px;
 }
 
+.control-grid .span-full {
+    grid-column: 1 / -1;
+}
+
+.control-grid .span-full input[type="range"] {
+    width: 100%;
+}
+
 .control-grid.condensed {
     gap: 10px;
     margin-top: 8px;
@@ -2255,7 +2265,8 @@ button:disabled:hover {
 .control-actions {
     display: flex;
     gap: 8px;
-    margin-top: 12px;
+    margin-top: auto;
+    padding-top: 16px;
     flex-wrap: wrap;
     width: 100%;
 }
diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html
index 28a32e6..70f9ca4 100644
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -108,7 +108,7 @@
                             Height
                             <input id="canvas-height" type="number" min="100" step="10" />
                         </label>
-                        <label>
+                        <label class="span-full">
                             Max output volume
                             <input id="max-volume-db" type="range" min="0" max="100" step="1" value="100" />
                             <span id="max-volume-label" class="form-helper">0 dBFS</span>