Responsive layout: the site has none, and is unusable below roughly 900px

[bshepp]

The stylesheet contains no width media queries at all - the only @media in src/style.css is prefers-reduced-motion. The layout is a fixed two-column grid and stays that way at every size.

Worth deciding before the site is announced anywhere, because a fair share of people open a mailing-list link on a phone.

What is actually wrong

.layout { display: grid; grid-template-columns: 300px 1fr; }

The sidebar is a hard 300px at every viewport, so the drawing gets whatever is left:

viewport	sidebar	canvas column	control rows above the drawing
360px	300px (83%)	~60px	1107px tall
390px	300px (77%)	~90px	1071px
414px	300px (72%)	~114px	1013px
768px	300px (39%)	~468px	372px
1024px	300px (29%)	~724px	236px

The right-hand column is arithmetic from the grid; the control-row heights were measured. That last column is the more interesting number: the topbar, comparison bar and export bar all use flex-wrap: wrap, so on a phone they do not overflow - they stack into more than a thousand pixels of controls, roughly three screenfuls, before the drawing begins.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> is correct, so a phone renders at true CSS width and genuinely breaks rather than scaling the desktop layout down to something merely small.

What already works, so nobody rebuilds it

• Pointer events throughout (pointerdown / pointermove / pointerup / pointercancel), so dragging to pan works on touch as-is.
• touch-action: none is already set on the canvas, so panning does not fight browser scroll or zoom gestures.
• Tap to pin a point works: it is a plain click handler.
• The screen-reader data table is an existing non-visual route to the numbers and does not need a mobile variant.

Touch gaps

• No pinch zoom. Zoom is bound to wheel only. The +/- buttons in the export bar are reachable, so zoom is not impossible, just not gestural.
• The cursor readout is effectively unreachable. It is driven by pointermove, which on touch only fires while pressed - and pressing already starts a pan. So the coordinate readout and panning are the same gesture. Needs a different affordance on touch, or accepting tap-to-pin as the only route.

Targets worth supporting

• 360x800 and 390x844 (the common Android and iPhone sizes)
• 414x896 (larger phones)
• 768x1024 portrait and 1024x768 landscape (tablets)
• 1280x800 upward is already fine
• Both orientations; devicePixelRatio 2 and 3 (the canvas already multiplies by dpr, worth confirming it holds at 3)

Sketch of an approach

• Collapse to a single column below a breakpoint, with the sidebar becoming a drawer or an accordion above the drawing rather than beside it.
• Give the drawing a guaranteed minimum height so it is never squeezed to nothing by wrapped control rows.
• Collapse the control bars into a smaller set on narrow screens - most of the style panel is a presentation concern, not something needed on a phone.
• Keep the null-model comparison legible: side-by-side halves are the whole point of the site and become two very thin strips on a phone, so stacking the panels vertically probably has to replace side mode below a breakpoint.

That last one is the only genuinely hard decision here. Everything else is layout.

Acceptance

• No horizontal page scroll at any target width
• The drawing occupies at least half the viewport height on a phone
• Every control reachable, nothing overlapping
• side mode still communicates a comparison at 390px wide

Unrelated to #1, which is about 3D views.