Cap the sheet's content column, and answer a mouse

[EnesYilmazcode]

Closes #93

Width caps and pointer affordances only. No breakpoint-driven relayout, no second design: the one-question flow, the single list, the peeked sheet and the zero-input open are untouched, and grep -c "@media (min-width" index.html still returns 0.

How this was measured

Every number below is from a real browser. scripts/shoot.mjs cannot run in this container (Chromium refuses to start as root and the shooter does not pass --no-sandbox), so the same CDP plumbing was reused in a throwaway rig — pinned clock, pinned position at the Thompson Library steps, real taps and real mouse drags — driving the app at seven viewports, once against origin/main and once against this branch. The rig is not committed. Nothing here is computed from the stylesheet.

What changed

One rule, three controls. .row, #chips and #origin are all flex: 1 1 auto inside a box that is left: 0; right: 0 with no cap, so one #sheet > * cap fixes all three. Measured at 1900x1000 on the ranked list, before → after:

	before	after
.row name column	1777.2px	389.2px
"Psychology Building 115" / "3 min"	x=20.6 / x=1813.8	x=714.6 / x=1119.8
the four chips	459.3 / 445.5 / 445.5 / 508.2	112.3 / 98.5 / 98.5 / 161.2
#origin-where	1823.4px	435.4px
its ✕	x=1842.6	x=1148.6
#back	x=9.6	x=694
#ask h1	54.4px	80px

The cap is a single --col: 32rem. No per-control rules were needed — #chips and #origin are siblings of the pane, not children of it, and the cap reaches them because it is on #sheet > *.

#ask h1 grows again. 13vw still governs the phone band; a max(…, min(6vw, 5rem)) term takes over, and 6vw only passes the old 3.4rem ceiling at 906.7px — wider than any phone in portrait and wider than a 430x932 phone turned sideways. Ceiling 5rem, reached at 1333px, chosen because "Vacant." measures 3.40× its font size, so 80px is 272px of wordmark inside the 24rem .opts column beneath it.

:hover for .opt, .opt.primary, .row, .row.on, .bar-btn (which is what #origin-where is), .chip, .chip[aria-checked], .dstep and #back. :active untouched. Guarded by (hover: hover) and (pointer: fine) and (forced-colors: none) so a phone does not get sticky hover and a high-contrast reader does not get an author colour on top of ButtonFace. Three new tokens, contrast checked with the same ratio the existing tokens were picked with: --fg on --card-hi 14.09:1, --dim on the row-hover surface 7.42:1 (over the 7:1 this screen is held to), near-black on --accent-hi 6.71:1.

A plain click on the grip toggles peek/full — see the decision below.

sw.js's shell gzip figure is recomputed because index.html grew: 84,201 → 86,442, using the same routine scripts/test/sw.test.mjs uses to check it. SHELL_CACHE is deliberately left alone for the stamper that runs in the job that commits.

Nothing moved at phone widths

The full before/after geometry dump is byte-identical at 320x568, 390x844, 430x932, and 393x852 with the root forced to 53px (the AX5 large-text case, where the @container list (max-width: 18em) reflow fires — it still fires, unchanged). Every box: sheet, list, row, name, walk, all four chips, origin bar, origin ✕, back arrow, wordmark. The only difference at any phone width in the whole diff is the deliberate click-toggle.

The decisions the issue asked for

Sheet or content? Content. The sheet keeps the window's width; only the column inside it narrows. The sheet's top border is a horizon line across the map, and body.has-bar stands it on an install rail that is the full width of the window — a narrowed sheet on a full-width rail reads as misaligned, and a card floating over the map is the second design docs/BLUEPRINT.md:408 rules out. #back is anchored to the column's left edge for the same reason: it moves toward what it acts on without becoming part of a panel.

pixelsPerGridFor — cap wins, so item 8 goes away. Measured against the committed data/campus.json (grid 4096, aspect() 1.20871, SETTLED_SPAN 0.28), MAX_RASTER_PX gives cap = 0.543946:

viewport	ideal	winner	raster
390x844 dpr 2	0.680106	cap	2693x2229
1440x900 dpr 2	1.569475	cap	2693x2229
1920x1080 dpr 1	0.941685	cap	2693x2229
3840x2160 dpr 2	3.766741	cap	2693x2229

The raster is already at the cap at every one of these, including the smallest phone, so pixelsPerGridFor returns the same constant at every size and rebuilding state.basemap on resize would produce a byte-identical canvas. No change made. One honest edge: ideal only wins when shorter × dpr < 623.8, i.e. a dpr-1 window under 624px on its short axis. A 1200x600 window on a 1× monitor is in that band and would still get a raster sized for boot. That is narrow enough not to justify touching the map this PR does not own, and it is written down here rather than fixed silently.

#origin-where span's ellipsis. Live again, checked with the longest name in the index, "The Well - Hilliard Recreation and Wellness Center". At 1900px on main the span wanted 418px and had 418px, so it never truncated; it has 383px now and does. At 390px it wanted 418 and had 261 before and after — unchanged, still truncating where it did.

Mouse drag on #handle: confirmed working. Dispatched as real Input.dispatchMouseEvent press/move/release, the sheet went 380 → 780px at 1900x1000 and 321 → 658px at 390x844, on main and on this branch. The handlers are pointer events, so a mouse was never excluded — it just had to know to drag. A plain click now toggles, because that was the only way out of PEEK. Measured on this branch: rest 380 → click 780 → click 380 at 1900x1000, and 321 → 658 → 321 at 390x844; on main a click was a no-op at every size. The rule is "open unless already at full", so a click on the room screen (which rests at ROOM_SHEET, 0.72) opens rather than collapsing.

Not done, deliberately

• scripts/shoot.mjs and docs/media/*.webp stay phone-only. The README frames are of the app on the device it is for. Adding a desktop frame means new committed binaries and a change to the shooter, which is not a CSS PR, and scripts/test/readme.test.mjs holds the frames and their alt text together. Worth its own issue if a desktop frame is wanted.
• PEEK = 0.38 against window.innerHeight is untouched. The issue names the 1900x~360px letterbox but does not ask for it, and changing the rest heights changes bandFor, which composes the map — the render loop this PR is not allowed near.
• #back moved horizontally, not vertically. It is now at the column's left edge but still top: .6rem, so at desktop heights it is still well above the sheet. Moving it down is a layout decision, not a cap.
• The grip is still not keyboard-focusable. The click toggle is a pointer affordance; it does not give a keyboard user a way out of PEEK. That gap predates this PR and is not made worse by it.

Tests

npm test: 669 tests, 665 pass, 0 fail, 4 skipped. Baseline on main is 666/662/0/4 — the three new tests are the layout contracts for the cap, the hover pass and the click toggle, added to scripts/test/screens.test.mjs beside the two large-text ones. Every existing test is green, including the container-query source-order contract and install.test.mjs's rail-and-sheet rule.

Note on #85

Another lane is removing #chips from the list screen entirely. If that lands, the chip half of the cap becomes moot — but the cap is a single #sheet > * rule with no chip-specific selector in it, so #chips simply stops existing and nothing here needs unpicking. This was built against current main; both branches touch index.html and sw.js's gzip figure, so expect a merge conflict on those and resolve by keeping both edits and recomputing the figure.

---

🤖 Generated with Claude Code

https://claude.ai/code/session_017xiX95r6nnUUmhD3KwMnWM

---

Generated by Claude Code