[jbspeakr]

Requested by Jan · project thread

What this changes

Review follow-up 5. On a 390 px phone the matrix showed a 176 px server column, three of 23 columns and a header block about 600 px tall. Instead of squeezing the desktop table, phones (below 40rem) now read the matrix one way at a time. Desktop is unchanged (pixel-identical in the shots below).

A group picker of plain anchors. All, then one pill per requirement group with its count, above the table. Each pill is an anchor to itself, so :target picks the view and it works without JavaScript; every group stays in the HTML. The island turns the choice into data-view with aria-current, so switching keeps the scroll position and adds no history entry. A #mx-<group> link (or the back button) still selects a group.

All: the whole atlas on one screen. Every requirement is a small glyph in a strip per server, the column width computed from the frame with container units (cqi), so all 23 fit with no sideways scroll. Group boundaries are hairlines, and the groups row names them as far as they fit. The glyphs are a picture here (no 10 px tap targets); a group's view opens them. Names are one line with an ellipsis.

A group: readable columns. Only that group's columns, chosen by one generated nth-child range per group (the groups are contiguous runs). Headers are two-line horizontal labels instead of vertical-rl, about 80 px tall instead of 600. Columns are sized so two and a half are in view, so the next one always peeks in, with scroll shadows at the frame edges (a fixed shade plus a cover that scrolls with the table). Cells open their observation as before.

Server column. 7rem on phones, names wrap to two lines and link to the server page, which is the transposed view. The access/auth chips are left to the server page on phones.

Tests. e2e: All fits without sideways scroll; a group shows only its columns with horizontal labels and comes back to All; the picker works without JavaScript; the 320 px sticky-column test now runs in a group view; the cell tests open the cell's group first. tasks.md gets R-05.

Screenshots

From astro preview of this branch at 1280 px and 390 px (Pixel 7), scrolled to the matrix.

	Before (main)	After
desktop, light
desktop, dark
phone, light		All
phone, dark		All
phone, a group, light		Discovery
phone, a group, dark		Discovery

The screenshots were committed once for stable URLs and removed in the next commit, so the squashed diff carries no images.

Code checklist

• pnpm check passes.
• The page reads fully without JavaScript, and the group picker works without it.
• Both themes checked.
• No new dependency.
• Screenshot baselines: matrix-phone.png (and possibly status-shapes-phone.png) change as intended and need the refresh-screenshots label; the desktop shots should not change.

---

Generated by Claude Code