Zoom: one number for both ways of reading a session

[thomwolf]

The zoom in the bottom bar sits next to the terminal/reader switch because they are the same kind of setting — how you are looking at everything. But it only moved the terminal: conversation.css is written in absolute px, so a reader pane ignored it, and flipping modes quietly changed how big your session was.

What this does

The conversation grammar gets one base size — --cx-base, 13px by default — and every type size in it becomes an em of that. The terminal spends the zoom on its xterm font size, the reader spends the same number on --cx-base (set on .pane-reader), so 13px at 100% either way and switching modes no longer resizes anything.

The reader scales as one surface — bar, turns, tool output, reply line, footer. A 10.5px toolbar left behind at 150% is the part you could not read in the first place; the remote pane already treats its log, composer and status line as one size for the same reason.

Things the px→em pass had to be careful about

• The Overview card shares this grammar and must not move. Hence a var(--cx-base, 13px) default rather than an inherited size: the card resolves to exactly the sizes it had.
• The answer's markdown needed its own heading sizes — the shared .markdown rules are absolute px, so an h1 would have stayed 22px while the prose around it grew.
• Spacing does not scale, but glyph columns must: the prompt's ❯ gutter, the step rail's ▸/✓ column and the body inset under it, the tool-field label column (was 4.5rem). At 200% the chevron ran into the first word of the prompt.
• .cs-pre's scroll cap is really "about twenty lines" — in rem it showed ten at 200%; in em it stays nineteen at every zoom.

Two deliberate visible changes

• The phone keyboard field keeps a fixed 16px: that guard is what stops iOS zoom-on-focus, and the new rule is later in the cascade, so styles.css's version is restated in this file. It is the one place the zoom does not reach.
• .cxv-top (Reader: come back to where you were reading #59's "earlier messages" line) now says the size it means. font: inherit sheds the button's UA font but also resets the size the element gets from its own .cxv-msg class, so it had been landing on the app's inherited 16px in a column of 11px messages. It is 0.85em now, like its siblings.

Verification

tsc --noEmit clean; web/test/exchanges|overviewSort|sessionTitle pass.

Measured in Chromium against a fixture built from the real ConversationView / Exchange / ToolCall DOM, comparing computed sizes with the pre-change stylesheet:

• nothing moves at 100% except .cxv-top (16 → 11.05px, above), and the two container elements that now carry the base and hold no direct text;
• every element in the reader scales exactly 0.5×/2× at 50%/200% — bar, prompt, meta, rail, tool fields, markdown headings, reply line, footer, and the "reading the trace…" state;
• the Overview card is untouched at all three;
• nothing overflows the pane sideways at 200%.

Deployed to the thomwolf/agent-manager test Space for a look in the real app.

🤖 Generated with Claude Code