Skip to content

Agentic UI: Add a preview zoom option - #4775

Open
shaunandrews wants to merge 2 commits into
fix-agentic-ui-font-scalingfrom
add-preview-zoom-option
Open

Agentic UI: Add a preview zoom option#4775
shaunandrews wants to merge 2 commits into
fix-agentic-ui-font-scalingfrom
add-preview-zoom-option

Conversation

@shaunandrews

@shaunandrews shaunandrews commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Related issues

None. Follow-up to #4573, which stopped the app's zoom from leaking into the preview; this branch is stacked on it and will be retargeted to trunk once that merges.

How AI was used in this PR

Claude Code implemented the option, the emulation math, and the tests, following the direction from the review of #4573. Reviewed through the diff, lint, type check, unit tests, and manual testing in the macOS development app.

Proposed Changes

  • Adds a Zoom group (50%–200%, default 100%) to the preview's More options menu while Fit pane is selected, the way the phone frame brings its orientation group.
  • The page zooms like a browser: it reflows at the pane size over the zoom and renders back up to fill the pane.
  • The device presets are already frames scaled to fit, so zoom doesn't apply to them; the group gives way while one is picked and the level comes back with Fit pane.
  • Zoom is remembered per site for the session, alongside the responsive mode and orientation.
  • The preview itself stays at 1:1 in Electron terms — everything goes through the same device-metrics emulation the presets already use — so the guest zoom pinning from Agentic UI: Fix zoom shortcuts with focused preview #4573 and this option don't fight.

Screenshots

The Zoom group, shown while Fit pane is selected:

Light Dark

The same pane at 100% and at 150% — the page reflows narrower and renders larger, still filling the pane:

100% 150%

Testing Instructions

  1. npm start, open a running site in the agentic UI.
  2. More options → Zoom → 150%. The page should reflow narrower and render larger, still filling the pane. 100% returns it to normal.
  3. Pick Desktop: the Zoom group disappears and the frame fits the pane as before.
  4. Pick Fit pane again: 150% is still selected and applied.
  5. Zoom the app UI (⌘+ / ⌘−): the preview zoom is unaffected.
  6. Switch to another site and back: the zoom level is remembered.

Automated verification:

  • npx eslint --fix on all modified files
  • npm test -- apps/ui/src/components/site-preview/index.test.tsx apps/studio/src/tests/ipc-handlers.test.ts (69 tests passed, then 51 in the preview file after the Fit-pane scoping)
  • npm run typecheck

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?

@shaunandrews
shaunandrews requested a review from a team September 4, 2026 15:40
@wojtekn
wojtekn force-pushed the add-preview-zoom-option branch from 796d3e4 to 218289e Compare September 8, 2026 07:55
shaunandrews and others added 2 commits September 8, 2026 10:43
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@wojtekn
wojtekn force-pushed the add-preview-zoom-option branch from 218289e to 38a3a98 Compare September 8, 2026 08:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant