Marc-André Bombeck
c12a6873b3
The offline, shared-record, demo and maintainership strips lived inside the content column, so each one pushed the top bar down while the sidebar's logo band stayed at the top of the window. Both bands read SHELL_HEADER_BAND and are therefore the same height with the same border, and the single line they draw across the top of the app still came apart: measured on the French maintainership strip, the two borders sat 66.5px apart at 768px and 61.0px apart at 1280px, and the full three-banner stack put them 184.5px apart. After the hoist the step is 0.00px at every depth and both widths. A banner is a statement about the whole window, not about the content column, so it belongs above the row. The outer wrapper keeps the h-dvh and the row below takes what the banners leave, which means the stack comes out of the viewport budget instead of being added on top of it: the document still does not scroll at any depth, and <main> stays the one vertical scroller at both breakpoints. The existing seam guard could not see this class. It asserts that both bands carry the shared band tokens, which stayed true the whole time, and the e2e spec beside it measures a shell with nothing above the header. The new spec forces the banners on through the conditions the components actually read — an unmaintained locale, a patched account payload, a real offline context — and measures the same two borders at four stack depths. Reverting the layout change turns it red on the first banner with the measured offset in the message, while the older seam spec stays green. The maintainership strip gains a data-slot so the shell's chrome can be enumerated from one attribute.
e2e/
End-to-end browser tests. Playwright 1.60 drives a production build of the app against a real PostgreSQL, with @axe-core/playwright for accessibility assertions. This is the heaviest test tier; CI runs it on every PR, and locally it is worth running when a change touches a UI flow.
Running
pnpm e2e
The Playwright config (../playwright.config.ts) builds the app (next build) and brings up Postgres before the specs run; setup/global-setup.ts seeds the auth + fixture state. The suite is not part of the fast local gate (typecheck / lint / test) — it surfaces at PR CI, so expect responsive/wizard/nav reworks to flag here first.
Layout
setup/—test.ts(the suite'stest+expectentry point),global-setup.ts(auth + DB seeding),test-helpers.ts(shared login + navigation helpers).utils/— fixtures such asmock-dashboard-snapshot.ts.*.spec.ts— one spec per flow: auth/login/redirect, dashboard, charts, the medication-wizard cadences (medications-wizard-*), insights generation + scroll restoration, doctor report, settings, mobile-viewport consistency, locale switch, accessibility (a11y.spec.ts), and thev1427-*regression set.
Conventions
Import test and expect from ./setup/test, never from @playwright/test — types (Page, Route, …) still come from the package. The entry point extends Playwright's test with an automatic fixture that drops route handlers and page listeners after every test, so a handler left in flight cannot fail the test it belonged to once the context closes. src/__tests__/e2e-route-cleanup-guard.test.ts enforces the import boundary.
Assert against stable data-* attributes (data-slot, data-display-step, root display attrs), not viewport-dependent visible text. Responsive sm:hidden UI changes break getByText on desktop while the underlying element is still present — anchoring on data attributes keeps the specs stable across breakpoints. See ../CLAUDE.md.