Playwright viewport e2e: verify actual rendered layout at 375/768/1280

[jiashuoz]

Background

web/src/app/(app)/responsive.test.tsx pins the Tailwind class strings on layout-critical containers (e.g., the pending split-pane grid template, the sidebar's md: breakpoints). It explicitly cannot verify runtime behavior because jsdom doesn't run a layout engine or evaluate CSS media queries — the file's header documents this trade-off.

What's not covered today

• 44px touch targets actually being 44×44 at render time on mobile breakpoints.
• The pending split-pane actually stacking into a single column at <768px.
• The sidebar hamburger sheet actually sliding in / dismissing on mobile.
• Custom-domain checklist not overflowing horizontally at 375px.
• Topbar ⌘K pill and breadcrumbs not colliding at narrow widths.

Scope

• Add Playwright to the web workspace (or rely on the existing CI runner if there's one we can extend).
• Three viewport profiles: mobile (375×667), tablet (768×1024), desktop (1280×800).
• Test matrix per profile: dashboard, domains, get-started (each step), pending, settings — verify no horizontal scroll, no clipped controls, tap-target boxes ≥44px on tappable elements.
• Run in CI on PR + a nightly job that catches regressions in dependent style changes.

Effort

M — Playwright setup is well-trodden, the matrix is finite, but flake control on CI (especially around font loading) needs care.

Source

REDESIGN.md §7 follow-up. Documented trade-off in web/src/app/(app)/responsive.test.tsx header comment.