From cc4f9068d91a3aa3d66e6ccd3a1fbd3be528bf57 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Sat, 7 Feb 2026 11:29:51 +0000
Subject: [PATCH] style(ui): polish brew form and stepper buttons

- Hide native number input spin buttons across browsers
- Fix brew time field width to match sibling fields
- Restyle .btn-adjust with accent-subtle fill instead of border
- Remove (M:SS) hint from brew time label
---
 static/css/input.css     | 23 ++++++++++++++++-------
 templates/pages/add.html | 18 ++++++++++--------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index 0a64556..5ef29d3 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -111,6 +111,16 @@ a {
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
+input.input-field[type="number"]::-webkit-inner-spin-button,
+input.input-field[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input.input-field[type="number"] {
+  -moz-appearance: textfield;
+}
+
 .input-field:focus {
   outline: none;
   border-color: var(--accent);
@@ -124,17 +134,16 @@ a {
   align-items: center;
   justify-content: center;
   border-radius: 0.375rem;
-  border: 1px solid var(--border);
-  background-color: transparent;
-  color: var(--text-secondary);
+  border: none;
+  background-color: var(--accent-subtle);
+  color: var(--accent);
   font-weight: 700;
-  transition: background-color 150ms ease, border-color 150ms ease;
+  transition: background-color 150ms ease, color 150ms ease;
 }
 
 .btn-adjust:hover {
-  background-color: var(--surface-alt);
-  border-color: var(--accent);
-  color: var(--accent);
+  background-color: var(--accent);
+  color: var(--accent-text);
 }
 
 /* ── Pills ─────────────────────────────────────────────────────── */
diff --git a/templates/pages/add.html b/templates/pages/add.html
index bae85d9..4403135 100644
--- a/templates/pages/add.html
+++ b/templates/pages/add.html
@@ -353,14 +353,16 @@
       <!-- Brew Time -->
       <div>
         <h4 class="text-xs font-semibold text-text-muted uppercase tracking-wide mb-3">Brew Time</h4>
-        <div class="flex flex-col gap-1 text-sm" style="max-width: 16rem">
-          <span class="text-text">Time (M:SS)</span>
-          <div class="flex items-center gap-2">
-            <button type="button" class="btn-adjust" data-on:click="$_brewTime = Math.max(5, $_brewTime - 5)">-</button>
-            <input type="hidden" name="brew_time" data-attr:value="$_brewTime" />
-            <input type="text" readonly class="input-field flex-1 text-center"
-              data-attr:value="Math.floor($_brewTime / 60) + ':' + String($_brewTime % 60).padStart(2, '0')" />
-            <button type="button" class="btn-adjust" data-on:click="$_brewTime = $_brewTime + 5">+</button>
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="flex flex-col gap-1 text-sm">
+            <span class="text-text">Time</span>
+            <div class="flex items-center gap-2">
+              <button type="button" class="btn-adjust" data-on:click="$_brewTime = Math.max(5, $_brewTime - 5)">-</button>
+              <input type="hidden" name="brew_time" data-attr:value="$_brewTime" />
+              <input type="text" readonly class="input-field flex-1 text-center"
+                data-attr:value="Math.floor($_brewTime / 60) + ':' + String($_brewTime % 60).padStart(2, '0')" />
+              <button type="button" class="btn-adjust" data-on:click="$_brewTime = $_brewTime + 5">+</button>
+            </div>
           </div>
         </div>
       </div>