Terminal: change the font size with a two-finger pinch on a phone #707

Problem

On a phone, the only way to change the terminal font size is the Settings → Terminal → Terminal font size stepper (src/components/SettingsDialog.tsx:251-252). It changes the size by 1 px per tap, from 10 to 22 px. The default is 13 px (src/lib/settings.ts:144, 212-223), and the value is saved per device. Reading a long agent output or seeing more columns means opening Settings several times.

A pinch on the terminal does nothing. The touch handler tracks only one finger (src/components/PaneTerminal.tsx:1173-1206), and .pane-terminal has touch-action: none (src/components/PaneTerminal.css:37), which also prevents the browser's own zoom there. Pinching elsewhere zooms the whole page, not the terminal grid.

#230 listed “A pinch or a ‘fit width’ toggle that scales the font down for a fixed grid” as an idea. #241 says, “Pinch or fit-to-width scaling from the issue's ideas is not part of this fix.” This proposal covers the pinch only, for terminal font size in general.

Proposal

Let a two-finger pinch on the terminal change its font size.

• Preview: when both fingers start on the terminal grid, scale only the terminal element with a CSS transform as they move. Do not change the font, fit the grid or resize the pty during the gesture.
• Commit: when either finger lifts, update the existing terminalFontSize setting once to round(startSize × distance / startDistance), clamped to 10–22. The existing font effect then measures, fits and resizes once (src/components/PaneTerminal.tsx:1382-1406). Keep its inUse() gate and its current behavior of skipping fit and resize for observe, fixed-grid and Chat views.
• Save: use the same per-device setting as the Settings stepper. It applies to every terminal pane on that device. Add no setting or strings.
• Cancel touch scrolling: if a second finger lands during a one-finger scroll, cancel that scroll. After a pinch, the remaining finger must not scroll until a new touch begins. On touchcancel, clear the preview and save nothing.
• iOS Safari: prevent gesturestart and gesturechange on the terminal host. WebKit bug 252665 reports pinch zoom inside overflow regions despite touch-action: none; xterm's viewport uses overflow-y: scroll.
• Unchanged: the Chat lens, KeyBar and input line, edge swipe, and desktop trackpad pinch (Ctrl+wheel) stay out of scope. edgeSwipe.ts resets on a second touch.
• Shared pty: a font change resizes the shared pty for every device, as the Settings stepper does today. A pinch should add one resize per gesture, not one per size step.

Where

Terminal; Phone, installed app and alerts

Workarounds and alternatives

• Settings stepper: use the current control and tap once for each size step.
• Change the font live at every step: a measured 13→20 change caused 7 xterm grid reflows and 7 pty resize frames. Each resize can trigger agent TUI redraws via SIGWINCH.
• Change the font live and defer pty resize: the grid still reflows 7 times, and disagrees with the pty while output arrives.
• Browser page zoom: removing touch-action enlarges everything, including the KeyBar, and does not change terminal columns or rows.
• Fit width: A fixed-grid terminal (observe, mirrored Windows pane) cannot be panned on a small screen #230 also suggested a “fit width” toggle. That is a separate idea and is not part of this proposal.

Measured with a prototype

Measured on macOS Chrome 155 with 390×844 mobile emulation in an isolated herdr test session, not on a physical phone.

• Pinch 13→20: during the gesture, 0 font measurements, 0 fits, 0 grid reflows, 0 resize frames and 0 synthetic wheel events. At the end, 1 fit, 1 grid reflow and 1 resize frame. The grid changed from 57×48 to 37×31. visualViewport.scale stayed 1.
• Pinch 20→13: 1 grid reflow and 1 resize frame.
• The size stayed within the 22 px and 10 px limits.
• One-finger scroll → second finger → partial release → 60 px move of the remaining finger: 0 extra wheel events. A new one-finger drag afterwards scrolls again.
• touchcancel: the preview cleared, the size stayed unchanged and there were 0 resize frames.
• Observe role: the font changed, with 0 fits, 0 resize frames and no grid change.
• The setting survived reload.
• Changing 13→20 one step at a time through the Settings stepper caused 7 grid reflows and 7 resize frames.
• Not verified: real iOS Safari and Android Chrome, long-press selection, or a Windows mirror pane.