BernhardBuckel
a1a84f924b
On a wide window the compact lab list was one five-column row whose only flexible column was the name: the name column sat mostly empty while the range bar and the trend stayed small at the right edge. The list's card is now a container, and the columns follow its width instead of the window's. Below 64 rem of card the row is the lg table it was, with the range bar at 12 rem; from 64 rem the bar column grows from 12 to 18 rem and the trend column from 72 px to 8 rem, and the bar fills its column. The two tiers exclude each other, so the result does not depend on the order the CSS is emitted in. The trend sparkline itself is unchanged. From lg up a long analyte name wraps instead of being cut off; a phone keeps the single line with an ellipsis, and the bar keeps its own 12 rem cap there. The shared 1280 px frame is untouched; a Playwright spec measures it on /labs, /measurements and /mood at 1280, 1920 and 3440 px. Fixes #1057
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.fixtures/— synthetic payloads a journey uploads, built in code rather than committed as blobs so the content stays reviewable (apple-health-export.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.