0030. Every panel works on phones and tablets, and layout tests keep it so

Status: accepted, 2026-10-21.

Context

The owner decided that every panel must be fully usable from 360 to 1440 px, and that the platform's installable web app is a hub at <d>/app, not a single console. The panel audits of 2026-10-21 found about 300 responsive and accessibility problems across the nineteen panels, mostly the same few classes: row actions missing from phone lists, actions and status in a sideways scroll nobody can see, 24–28 px controls, information only in hover tooltips, headers wider than the phone, dialogs whose submit scrolls away. Hand-run browser checks found them once; nothing stops them from coming back with the next screen.

Decision

Panels support widths from 360 to 1440 px and are checked at 360, 390, 820, 1180 and 1440 px, with touch on phones and tablets, in English and Russian.
Everything a panel offers at 1440 px, every action and every piece of information, is reachable at every supported width without hover, a tooltip or a sideways scroll without a visible hint. Row actions never scroll out of view.
On a coarse pointer every control is at least 40 × 40 px; on a fine pointer at least 24 × 24 px.
Components adapt to the space they have (container queries, their measured width), not only to the viewport.
Every panel has a Playwright layout test over all its screens, run against the built panel with synthetic API fixtures in the browser and no backend. It checks page overflow, clipped and unreachable controls, unhinted sideways scroll, target sizes, parity of actions with 1440 px and accessible names. It runs locally (pnpm test:layout) and in CI, and a panel merges only when it passes. Exceptions are listed in the panel's layout file, each with a reason.
Panels are not installable on their own. They carry the phone meta (viewport with safe areas, theme colour, home-screen icon) and send people to the hub to install the app and get push.

Consequences

Each panel keeps a layout file and fixtures next to its code; a new screen comes with its entry, and a sidebar link without one fails the test.
The registry provides the building blocks the rules need (row actions, row links, column priorities, truncation, scroll hints, hints instead of tooltips, an action bar, detail sheets, drawers with pinned footers), so most panels meet them by using the items.
CI gains a Playwright image and a few minutes per panel change.
Widths under 360 px and above 1440 px are best effort; landscape phones are not gated.