fix: wrap per-host status line so 320px viewport does not scroll (closes #42)

The status line carried `whitespace-nowrap`, and once populated its content
(`min 1ms / med 2ms / avg 3ms / max 4ms`) measured 325px inside the 270px host
column at a 320px viewport. The element does not clip, so the overflow
propagated to the document and the page scrolled horizontally.

Drop `whitespace-nowrap` from the status line and instead make each
label/value/separator group individually unbreakable, so wrapping happens only
between stats and a wrapped line never starts with a separator. The line fits
on one row in the 420px desktop column, so the wide layout is unchanged.

The repeated class string is now a single constant.

TODO.md

@@ -22,10 +22,6 @@ 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

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="debug-toggle-label cursor-pointer">
+          <label class="cursor-pointer">
             <input type="checkbox" id="debug-toggle" class="mr-1">
             <span>Debug log</span>
           </label>

src/styles.css

@@ -14,38 +14,6 @@ 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,
@@ -70,10 +38,9 @@ body {
         gap: 0.75rem;
     }
 
-    /* Pause button: smaller on mobile, but not below the tap-target floor */
+    /* Pause button: smaller on mobile */
     #pause-btn {
         padding: 0.5rem 1rem;
-        min-height: 2.75rem;
     }
 
     #pause-btn svg {