Queue-North-Website/docs
Scarlett 231f07c62d fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px
Two real defects, found by rendering the site rather than reading it. Neither
was among the twenty issues filed for Batches 10 and 11.

#214 (P1) — at exactly 768px, iPad portrait, the header's "Request
Consultation" CTA measured x 676-778 against a 768px viewport: 10px sliced off,
with no scrollbar to reveal it because html/body carry overflow-x:hidden. At
that width the burger menu is already hidden, so the primary conversion action
was simply unreachable. The nav's five gap-6 gaps were the slack; gap-4 at md
(gap-6 from lg) frees 40px, keeping the CTA on screen at md rather than
deferring it to lg and leaving 768-1023px with no CTA at all.

#215 (P2) — Google's reCAPTCHA checkbox iframe is a fixed 304px that cannot be
resized. At 320px it measured x 41-345, so 25px of branding and the privacy and
terms links were clipped. Scaled to 0.85 below 360px with the wrapper height
reduced to match, since transform does not affect layout and the form would
otherwise gain dead space.

Also adds scripts/qa-browser.mjs, which found them. It measures horizontal
scroll, broken images, elements past the right edge, CLS and LCP across pages
and viewports. Written because seven of the ten issues in Batches 10 and 11
misstated their own evidence, and two of those would have made the site worse
if actioned.

Two false positives in the tool itself, both fixed before trusting it:
- Lazy images below the fold read as broken. It now scrolls the page AND chases
  each un-loaded image individually, and reports observed HTTP failures apart
  from never-rendered images.
- `--paths / --viewports 320` swallowed "320" as a path. Argument collection now
  stops at the next flag.

Verified against a local production build: 5 paths x 5 viewports, zero findings.
Before the fix the same run reported the CTA overflow at 768 on four pages and
the reCAPTCHA overflow at 320 on /contact.

Not yet live — this needs a release and a deploy.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-18 04:05:37 -05:00
..
architecture fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px 2026-08-18 04:05:37 -05:00
data docs: adopt project template, retire the markdown backlog 2026-08-18 01:21:13 -05:00
design docs: adopt project template, retire the markdown backlog 2026-08-18 01:21:13 -05:00
history docs: v0.9.4 is live, production is on a numbered version, and Watchtower is out 2026-08-18 03:38:02 -05:00
planning feat(deploy): production always runs a numbered version 2026-08-18 02:54:42 -05:00
qa fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px 2026-08-18 04:05:37 -05:00
security fix(infra): queuenorth.com is the production origin, and it is this deployment 2026-08-18 02:08:12 -05:00
DOC_TRUST_MAP.md fix(security): stop secrets.sh flagging every prerendered page, and clear the dangling doc claims 2026-08-18 01:40:46 -05:00
OPERATIONS.md docs: v0.9.4 is live, production is on a numbered version, and Watchtower is out 2026-08-18 03:38:02 -05:00
TOOLS.md fix(ui): header CTA clipped at iPad portrait, and reCAPTCHA cut off at 320px 2026-08-18 04:05:37 -05:00
WORK_CYCLE.md feat(deploy): production always runs a numbered version 2026-08-18 02:54:42 -05:00