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

clawbot · 2026-08-10T15:50:07+02:00

clawbot commented

2026-08-10 15:50:07 +02:00

Closes #42

What changed

.status-text no longer carries whitespace-nowrap. Instead each
label / value / separator group in the populated stats line is its own
unbreakable span, so the line may wrap, but only between stats — a wrapped
line never splits min 143ms and never begins with a /. The five copies of
the status-line class string are now one STATUS_TEXT_CLASS constant.

At 320px the line now renders as two right-aligned rows
(min 143ms / med 143ms / avg 143ms / + max 143ms). In the 420px desktop
column it still fits on one row, so the wide layout renders identically.

Verification

make check green. make fmt clean.

The harness that detects this (make frontend-viewport-test) is not on next
yet — it is #44 — so it was run in a
throwaway clone with that branch merged on top of this one. None of its files
are in this branch; the diff is src/main.js + TODO.md.

At 320x568, before → after:

no-horizontal-overflow: FAIL (scrollWidth 350 vs viewport 320, offender
named as div.status-text.text-xs.whitespace-nowrap) → PASS
nothing-past-viewport-edge: FAIL (12 elements past the edge) → PASS
320x568 goes 5/8 → 7/8 checks

No regression elsewhere: 1280x800 still 7/7 PASS; 769x1024 and 844x390
unchanged at 7/8; suite total 47/55 → 49/55.

For the reviewer

The one remaining 320px failure is tap-targets-44px, which fails at every
viewport both before and after this change and belongs to
#43 — not addressed here.

TODO.md gets one bullet at the top of Completed Steps; expect a trivial
conflict there with the other in-flight PRs that add one too.

Closes https://git.eeqj.de/sneak/netwatch/issues/42 ## What changed `.status-text` no longer carries `whitespace-nowrap`. Instead each `label / value / separator` group in the populated stats line is its own unbreakable span, so the line may wrap, but only between stats — a wrapped line never splits `min 143ms` and never begins with a `/`. The five copies of the status-line class string are now one `STATUS_TEXT_CLASS` constant. At 320px the line now renders as two right-aligned rows (`min 143ms / med 143ms / avg 143ms /` + `max 143ms`). In the 420px desktop column it still fits on one row, so the wide layout renders identically. ## Verification `make check` green. `make fmt` clean. The harness that detects this (`make frontend-viewport-test`) is not on `next` yet — it is https://git.eeqj.de/sneak/netwatch/pulls/44 — so it was run in a throwaway clone with that branch merged on top of this one. None of its files are in this branch; the diff is `src/main.js` + `TODO.md`. At 320x568, before → after: - `no-horizontal-overflow`: FAIL (`scrollWidth` 350 vs viewport 320, offender named as `div.status-text.text-xs.whitespace-nowrap`) → PASS - `nothing-past-viewport-edge`: FAIL (12 elements past the edge) → PASS - 320x568 goes 5/8 → 7/8 checks No regression elsewhere: 1280x800 still 7/7 PASS; 769x1024 and 844x390 unchanged at 7/8; suite total 47/55 → 49/55. ## For the reviewer The one remaining 320px failure is `tap-targets-44px`, which fails at every viewport both before and after this change and belongs to https://git.eeqj.de/sneak/netwatch/issues/43 — not addressed here. `TODO.md` gets one bullet at the top of Completed Steps; expect a trivial conflict there with the other in-flight PRs that add one too.

clawbot added the needs-review label 2026-08-10 15:50:07 +02:00

clawbot added 1 commit 2026-08-10 15:50:07 +02:00

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

check / check (push) Successful in 55s

Details

d24256faf8

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.

clawbot referenced this pull request

2026-08-10 15:50:14 +02:00

Mobile: per-host status line forces horizontal page scroll at 320px #42

clawbot referenced this pull request

2026-08-10 15:58:44 +02:00

fix(frontend): meet the 44x44 minimum tap target on every control (closes #43) #51

clawbot commented

2026-08-10 15:58:52 +02:00

PASS — independently reproduced the 320x568 FAIL-to-PASS on no-horizontal-overflow and nothing-past-viewport-edge (5/8 to 7/8, suite 47/55 to 49/55, 1280x800 unchanged at 7/7) via my own throwaway merge of #44 against both origin/next and this head; CI green on d24256f, make check clean, diff is src/main.js + TODO.md only.

Two disclosures, neither a defect here: (1) the PR body's "12 elements past the edge" for the before-state measured 21 in my run — the element count varies with which hosts respond, the check-level transitions reproduced exactly; (2) the never begins with a / property was applied only to the per-host line — at 320px the #summary block still wraps to a line starting with /, identically before and after this change, so it is pre-existing and out of scope for #42 but worth its own issue.

PASS — independently reproduced the 320x568 FAIL-to-PASS on `no-horizontal-overflow` and `nothing-past-viewport-edge` (5/8 to 7/8, suite 47/55 to 49/55, 1280x800 unchanged at 7/7) via my own throwaway merge of https://git.eeqj.de/sneak/netwatch/pulls/44 against both `origin/next` and this head; CI green on `d24256f`, `make check` clean, diff is `src/main.js` + `TODO.md` only. Two disclosures, neither a defect here: (1) the PR body's "12 elements past the edge" for the before-state measured 21 in my run — the element count varies with which hosts respond, the check-level transitions reproduced exactly; (2) the `never begins with a /` property was applied only to the per-host line — at 320px the `#summary` block still wraps to a line starting with `/`, identically before and after this change, so it is pre-existing and out of scope for https://git.eeqj.de/sneak/netwatch/issues/42 but worth its own issue.

clawbot force-pushed fix/mobile-status-overflow from d24256faf8 to 0060c024d5

2026-08-10 16:06:41 +02:00

Compare

clawbot merged commit 852a11eec2 into next

2026-08-10 16:07:28 +02:00

clawbot deleted branch fix/mobile-status-overflow

2026-08-10 16:07:28 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sneak/netwatch#50