From c05711f344e707c891498483c387087d2c0ed6d8 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Mon, 10 Aug 2026 13:54:58 +0000
Subject: [PATCH] fix(frontend): meet the 44x44 minimum tap target on every
 control (closes #43)

Every interactive control measured below the 44x44 CSS px floor (Apple
HIG, WCAG 2.2 SC 2.5.5) on touch viewports: .pin-btn at 16x16, the
debug-log label at 89.3x14, #interval-select at 64x28 and, in the narrow
layout, #pause-btn at 108.2x39.8.

The pin button keeps its 16x16 layout footprint: the button box grows to
44x44 and matching negative margins take the growth back out of layout,
so neither row height nor the icon's position changes in either layout.
The select and the pause button get a min-height, the debug-log label
becomes an inline-flex box 44 tall. Applied unconditionally rather than
under a breakpoint, since a phone in landscape is above the 768px
breakpoint and still a touch device.
---
 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 {
-- 
2.49.1