Fit wide charts and diagrams to their column from the first frame

[MaggieAppleton]

On a phone, an investigation's bar chart opened at 1:1 and was cropped until you pressed Fit. Its controls also wrapped onto two rows, and the four-column table cut off its last column.

What changed

• Fit is the default (packages/diagrams/src/diagram.tsx): a diagram wider than its column opens fitted to the column. The fit is plain CSS (min(100%, <authored>px)), so it already applies on the first frame and keeps up with every resize. A diagram that fits stays at 1:1. Once you choose a size with zoom or Actual size, it stays through resizes. Fit to width hands sizing back to the column.
• fitDiagram no longer stops at 85%. Zoom out still stops at 85%, or at the fitted size if that's smaller.
• One row of controls in a narrow column (viewer/chrome.css): a container query hides Restart, the step counter, zoom in, zoom out and the zoom percentage. Play, previous, next, Fit and 1:1 stay. Play restarts a finished diagram, and you can still pinch to zoom. The cutoff is 21rem for a mouse and 30rem for touch, where the buttons are 44px.
• Investigation tables (packages/editor/src/styles.css): the table sits inside .plan-content, so it picked up the authored-table display: block and the 7rem minimum cell width. Both are reset for .plan-evidence, with slightly tighter padding.

This applies to every @chopin/diagrams type: charts, graphs, lanes and structures (checked all 42 gallery fixtures at 390px). Wireframes already reflow, and Mermaid blocks keep their own legibility floor and full-screen sheet, so neither changes.

Before / after, 390×844

Before	After

Tests

• New e2e a chart wider than a phone column fits it from the first frame: records the chart's width in its first animation frame and checks it is ≤ the stage width. It also checks the controls sit on one row and that Fit and Actual size toggle overflow.
• Updated the wide-architecture e2e: the diagram fits at 390 and 1440, keyboard scrolling is tested at Actual size, and a chosen 115% survives a resize.
• bun test packages/diagrams packages/experiment and bun run types pass. The seecode.e2e.ts and wide-content.e2e.ts e2e tests pass locally.

🤖 Generated with Claude Code

Landing validation

The four chart-stack patches are preserved on current main. Fresh local CI and workspace types pass; prior production build, units, application browsers and galleries passed. Both native stack layers are running fresh full GitHub CI; stack metadata and existing images are preserved.

Final stack landing: source patches are unchanged on main 99d5d92a, including the shared Linux bundle repair #553 and all other handoff PRs. Fresh local project checks and types pass. Invalid lane anchors were replaced through the lane CLI, preserving their constraints; audits are now clean. All five fresh GitHub checks pass on these exact final stack heads, including design behavior, diagram galleries, full browser/system integration, and the Linux container build. The stack is ready for its native rebase merge.

[MaggieAppleton]

Review: Changes needed

CI is red. The e2e job fails 3 [narrow] diagram-gallery tests that this PR breaks and doesn't update. The design change itself is sound. I checked it in a real investigation child document (fake connector flow → published "Startup comparison" child) at 390×844 and 1440×900, against origin/main.

Blocking

1. e2e/diagram-gallery/gallery.e2e.ts:91 "a narrow diagram exposes keyboard horizontal scrolling": the stage no longer overflows at fit, so it has no tabindex. Click Actual size first, as the updated seecode test does.
2. gallery.e2e.ts:102 (line 111, counter(total) hidden) and :130 (line 155, Restart diagram hidden): the step counter and Restart are now display: none in the narrow project. Limit those assertions to [wide], or run them in a wide specimen. Add a narrow assertion that Play restarts a finished diagram, since the PR relies on that.

Verified

• Real child document, 390: before, the chart was 532px in a 308px stage (cropped), the controls took 2 rows, and the table was 449px in 308px. After, the chart is fitted (58%), the controls take 1 row (Play, Prev, Next, Fit, 1:1), and the table fits at 308/308 with display: table.
• First frame: on main, the drawing is 532px in a 342px stage. With this PR it is 342px in 342px. So the new e2e's assertion fails on main. I reproduced that assertion with a probe; I didn't run the suite locally because the e2e DB ports are held by another project. Fit also has no aria-pressed on main.
• Zoom persistence: Actual size at 390, then resize to 1440, then back to 390, stays at 100%. Fit returns it to 51%.
• Desktop: a diagram that fits is unchanged (chart 532px in a 554px stage stays 1:1, no zoom group). The child-document chart at 1440 (520px stage) is now 98% instead of a 12px sideways scroll. A wide architecture at 1440 is now fitted at 83% rather than 100% plus scroll, which is intended.
• Mermaid: its path (packages/editor/src/widgets/*) has no diff. Ordinary document tables keep display: block and the 112px cell floor, so the .plan-evidence reset doesn't leak.
• Hidden controls: display: none takes zoom −/+ and the % out of the accessibility tree as well. Tab order is Play, Prev, Next, Fit (pressed), 1:1, with correct names. A keyboard or screen-reader user keeps the two meaningful states, and browser zoom or pinch covers the rest. Acceptable.

Legibility (non-blocking, follow-up recommended)
Fitting beats cropping, but it isn't a good end state on a phone. Measured rendered text at 390:

• Bar chart at 58–64%: axis ticks about 5px, value labels about 6px.
• Wide architecture (derived compact view) at 51%: node labels about 7px.

Recommendation:

• Charts should draw to width. render.ts:263 only re-derives the graph family against availableWidth. A bar chart can reflow bar width and gap at a constant font size, so its text stays at 100% with no zoom.
• Graphs and architectures already get the compact re-derivation. When the fit still drops below about 0.75, offer a full-screen expand that reuses Mermaid's sheet, rather than more zoom chrome.