fix(dashboard): no panel pans sideways on a phone; tab, filter and link rows wrap; live layout tests run in CI

[kh0pper]

What this fixes

On a phone, some dashboard panels were wider than the screen, so the whole panel slid sideways and cards were cut off at the edge. The Media tab row was fixed in #451. This PR fixes the problem for every panel at once, and adds checks so it doesn't come back.

An audit of every dashboard panel (19 core, 66 bundle; 279 views; 390, 412 and 1280 px wide) found:

	before (main)	after (this PR)
default text size	3 views overflowing (Contacts)	0
largest ("xlarge") text size	24 views overflowing (8 panels)	0

What users will see

On a phone, these rows now wrap onto a second line instead of running off the screen:

• the Contacts tab row, and the Contacts cards and profile header. A long name no longer widens the card grid. That grid was also too wide on desktop, by about 100 px.
• the Settings → LLM tab row, and its Profiles sub-tabs
• the Kodi tab row
• the Files type filter (All / Images / Documents / Other)
• the Media All / Unread / Starred filter
• the Data Dashboard tabs
• the Projects card badges, which keep their size at large text
• the Matrix (Dendrite) and WriteFreely status rows, where a long value wraps at large text

Desktop layout does not change, except that the Contacts grid now fits.

The shared guard

The shared dashboard stylesheet now has a small guard. It uses zero-specificity selectors, so any panel's own CSS still wins.

• Rows wrap on phones (768 px and below). This applies to:

  • inline-style flex rows of links or buttons;
  • rows whose class ends in -tabs, -tabbar, -nav, -chips, -toolbar, -filters or -pills.

  These rows now wrap the same way the shared tabs() row always has.

• Link cards in a grid get min-width: 0, so one long name cannot widen every column. Buttons, badges and icons are left alone.

• Opting out: a row that must stay on one line sets flex-wrap:nowrap and overflow-x:auto, so it scrolls inside itself instead of sliding the page. nowrap alone is not accepted. The CSS comment, the source scan and the scan's failure message all state this same rule.

What it does not do:

• no blanket overflow-x: hidden on the page or content area, which would hide content instead of fitting it;
• no word-breaking rule for all headings.

A new test file, tests/dashboard-phone-rows.test.js, does three things:

• A source scan, which runs everywhere, CI included. It fails when a panel builds its own row of links or buttons without saying how that row fits a phone, or uses a row-like class name the guard cannot reach.
• Live layout checks in a headless Chrome at 390 and 412 px wide.
• Knock-out checks, which remove each rule and confirm the overflow comes back. This proves the tests actually exercise the mechanism.

scripts/dev/phone-overflow-audit.mjs is a developer tool for the audit above. It runs a throwaway gateway on loopback with a scratch home directory. CI does not run it.

CI change

• The suite job gets one new step, npx --yes playwright@1.63.0 install --with-deps chromium-headless-shell. That is a pinned Chrome Headless Shell (153.0.8010.12).
• CROW_REQUIRE_TEST_CHROME=1 is set on the CI npm test step only. In CI, a missing or broken browser now fails the live tests instead of letting them skip quietly. Local runs are unchanged.
• About 78 live layout tests now run in CI that used to skip there: phone rows, text size, and the Perch phone and hub tests.
• Expected extra time: roughly 10 s for the install, plus up to about 1 minute of suite time (measured locally). The current suite job is about 5.5 min against a 15 min timeout.
• Job keys suite, static-checks and audit are unchanged, and no job name: was added.

Versions

bundle	version
data-dashboard	1.0.3
media	1.1.4
matrix-dendrite	1.0.3
writefreely	1.0.2

The registry was regenerated to match.

Not changed

• no schema change
• no new port
• no package or lockfile change (package.json and package-lock.json are untouched)

Testing

• npm test: 7710 tests, 7709 pass, 0 fail, 1 skipped.
• CI-like run (GITHUB_ACTIONS=true, CROW_REQUIRE_TEST_CHROME=1, the exact CI Chrome build): 7709 pass, 0 fail, 1 skipped.
• check-port-allocation, build-registry --check and check-public-hygiene: all OK.
• npm audit --omit=dev --audit-level=critical: 0 critical.
• Phone audit on this branch, default and xlarge text: 0 overflowing measurements out of 838 each. The one other entry is the gis-map plugin route, which is not a panel and is expected to 404.