Files

check / check (push) Successful in 38s

Details

test: automated responsive-layout harness (closes #13 )

Verifies the mobile layout from #5 with a real browser engine instead of
by hand on a phone. make frontend-viewport-test builds dist/, serves it
from the same digest-pinned nginx image and the same nginx.conf the
shipping container uses, and drives a digest-pinned headless Chrome
against it over CDP.

Viewport widths are derived from the app's own CSS rather than from a
list of phone models: the @media conditions in src/styles.css and any
Tailwind responsive prefixes in the markup are parsed, and each
breakpoint is tested one pixel below, exactly on, and one pixel above.
max-width: 768px matches at 768, and a generic 375px test sails past
that boundary entirely. Four anchor viewports are added with stated
reasons: a 320px floor, a desktop baseline, and two phone-landscape
sizes straddling the breakpoint.

Assertions are on computed layout, not screenshots: horizontal overflow,
elements past the viewport edge, clipped text (deliberate ellipsis
truncation excluded), 44x44 minimum tap targets, and genuine reflow of
the host rows checked on both flex-direction and geometry. Probing and
gateway detection are asserted to still run at narrow widths, since the
early-return mobile path rejected in #8 is what would silently regress.
Screenshots are written to tmp/viewport/ as artifacts alongside the
results, not as the evidence.

puppeteer-core rather than playwright: it is the one variant of either
that never downloads or bundles a browser, so the browser stays a
digest-pinned image and the npm side is pinned by yarn.lock integrity.

The browser container runs on an --internal docker network with no route
off the host; the harness answers the app's latency probes itself from a
fixed delay table so the rows render a realistic spread of value widths.

Kept out of make check: it needs Docker and takes minutes, where make
test has to stay under 20 seconds.

The harness was observed failing before being trusted, twice: a planted
900px fixed-width element in a host row, and the mobile reflow rule
neutered. Both reverted.

Against the current layout it reports two real defects, filed as #42
(horizontal overflow at 320px) and #43 (tap targets below 44x44).

2026-08-09 14:52:52 +00:00

2.4 KiB

Raw Blame History

Workflow

branch (from main)
do the work in Next Step
move Next Step to the top of Completed Steps
move the top item of Future Steps into Next Step
commit (TODO.md changes in the same commit as the work)
merge to main if the branch is not protected, otherwise open a PR
push

Status

pre-1.0. No git tags. Backend work in flight on feat/reportbuf-storage (dirty: src/main.js). Frontend is functional; backend is new and unmerged.

Next Step

Land feat/reportbuf-storage: finish the in-progress src/main.js change, get make check green, and merge the branch to main. The branch adds the backend (buffered zstd-compressed report storage), the CI workflow, and backend repo standard files, so merging it also closes most compliance gaps.

Completed Steps

2026-08-09: automated responsive-layout harness (make frontend-viewport-test): digest-pinned headless Chrome driven over CDP against the built dist/, viewport widths derived from the breakpoints in src/styles.css (#13). Found two real layout defects, filed as #42 and #43
2026-07-07 Adopted scripts-to-rule-them-all: script/ entrypoints, Makefile shims, README Entrypoints section
2026-02-27: backend with buffered zstd-compressed report storage; CI workflow and backend repo standard files; backend Dockerfile fixed (Go 1.25, golangci-lint) and moved to repo root (feat/reportbuf-storage, unmerged)
2026-02-26: host row layout redesigned with CSS grid; overflow and spacing fixes; nginx config extracted; port hardcoded to 8080
2026-02-26: debug log panel, median stats, recovery probe, Docker build fix, S3 Singapore endpoint added
2026-02-23: summary box redesign, host pinning, local and UTC clocks, checks counter
2026-02-23: hosts sorted by latency; GET instead of HEAD for latency; timeout derived from interval; Hetzner regional endpoints; 3s interval
2026-01-29: initial NetWatch network latency monitor

Future Steps

Fix the two layout defects the viewport harness found (#42 horizontal overflow at 320px, #43 tap targets below 44x44), then wire script/frontend-viewport-test into CI as its own step
Compliance top-up as one small commit: add .editorconfig and add the hooks target to the Makefile
After merge, confirm .gitea/workflows/check.yml is on main and CI is green (main always green policy)
Decide what to do with untracked resume.sh: commit it, gitignore it, or delete it