From f7c7f92e27ac3bf6598c832f8f4166fddc30236e Mon Sep 17 00:00:00 2001
From: clawbot <clawbot@noreply.example.org>
Date: Mon, 10 Aug 2026 16:12:00 +0200
Subject: [PATCH] fix(frontend): meet the 44x44 minimum tap target on every
 control (closes #43)

---
 TODO.md        |  4 ++++
 src/main.js    |  2 +-
 src/styles.css | 35 ++++++++++++++++++++++++++++++++++-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index 0caaa52..1da8930 100644
--- a/TODO.md
+++ b/TODO.md
@@ -22,6 +22,10 @@ files, so merging it also closes most compliance gaps.
 
 # Completed Steps
 
+- 2026-08-10: every interactive control now meets the 44x44 CSS px minimum tap
+  target (`.pin-btn`, `#interval-select`, the debug-log label and, on narrow
+  viewports, `#pause-btn`). The pin button's hit area grows via matching
+  negative margins, so its layout footprint and row density are unchanged
 - 2026-08-10: per-host status line wraps below the 768px breakpoint instead of
   forcing horizontal page scroll at 320px
 - 2026-08-09: `Dockerfile.backend` reworked to the mandated Go multistage
diff --git a/src/main.js b/src/main.js
index aaa3cdf..135d36a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -677,7 +677,7 @@ function buildUI(state) {
         </p>
         <p class="mt-2"><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
         <p class="mt-2">
-          <label class="cursor-pointer">
+          <label class="debug-toggle-label cursor-pointer">
             <input type="checkbox" id="debug-toggle" class="mr-1">
             <span>Debug log</span>
           </label>
diff --git a/src/styles.css b/src/styles.css
index 600e453..a232397 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -14,6 +14,38 @@ body {
         ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
+/* ---- Minimum tap targets ----------------------------------------------
+   Every interactive control is at least 44x44 CSS px (Apple HIG, WCAG 2.2
+   SC 2.5.5). Not scoped to a breakpoint or to `pointer: coarse`: a large
+   phone in landscape is above the 768px breakpoint and still a touch
+   device. */
+
+/* The button grows to 44x44 while the negative margins keep its layout
+   footprint at the 16x16 of the icon inside it, so row height and the
+   icon's position are unchanged. */
+.pin-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    margin: -0.875rem;
+}
+
+/* A select paints its own background and border, so it has to actually be
+   44 tall rather than borrow the trick above. */
+#interval-select {
+    min-height: 2.75rem;
+}
+
+/* The tappable target for #debug-toggle is the label wrapping it. */
+.debug-toggle-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.75rem;
+}
+
 .sparkline-container {
     background: linear-gradient(
         to bottom,
@@ -38,9 +70,10 @@ body {
         gap: 0.75rem;
     }
 
-    /* Pause button: smaller on mobile */
+    /* Pause button: smaller on mobile, but not below the tap-target floor */
     #pause-btn {
         padding: 0.5rem 1rem;
+        min-height: 2.75rem;
     }
 
     #pause-btn svg {