Agentic UI: Add responsive preview modes and the More options menu by bcotrim · Pull Request #4368 · Automattic/studio

bcotrim · 2026-07-28T11:00:32Z

Related issues

Fixes STU-2089

How AI was used in this PR

Implemented with Claude Code, ported from the Design Preview exploration (#3975). I reviewed the code and verified manually in the app.

Proposed Changes

New More options (⋮) menu in the preview toolbar with a Responsive mode group: Fit pane (default), Mobile · 390×844, Tablet · 768×1024, and Desktop · 1440×900. Mobile adds a Mobile orientation group (Portrait / Landscape).
Presets render as fixed-size device frames on a dot-grid letterbox, scaled to fit the pane — browser responsive-design-mode style. Mobile uses real device emulation (CDP), so responsive themes behave like on-device.
The chosen mode is remembered per site for the session.
The menu is modal, so clicking anywhere outside — including the preview page — closes it.

Fit	Mobile	Tablet	Desktop

Testing Instructions

Full app restart (new main-process IPC handler), agentic UI, a running site.

Preview → ⋮ → try each mode; resize the panel — frames re-fit live.
Mobile: orientation group appears, Landscape flips to 844×390, and a responsive theme shows its phone layout.
Pick a mode, switch to another site (starts at Fit pane), switch back — your mode is restored.
With the menu open, click the preview page → it closes. ⋮ is hidden while the site is stopped.
Check light + dark.

Pre-merge Checklist

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

🤖 Generated with Claude Code

wpmobilebot · 2026-07-28T11:16:08Z

📊 Performance Test Results

Comparing 68a2066 vs trunk

app-size

Metric	trunk	`68a2066`	Diff	Change
App Size (Mac)	1375.36 MB	1375.50 MB	+0.14 MB	⚪ 0.0%

site-editor

Metric	trunk	`68a2066`	Diff	Change
load	768 ms	745 ms	23 ms	⚪ 0.0%

site-startup

Metric	trunk	`68a2066`	Diff	Change
siteCreation	6479 ms	6514 ms	+35 ms	⚪ 0.0%
siteStartup	2374 ms	2381 ms	+7 ms	⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

…sponsive-preview-modes-and-the-view-menu

…sponsive-preview-modes-and-the-view-menu # Conflicts: # apps/ui/src/components/site-preview/index.tsx

…sponsive-preview-modes-and-the-view-menu

katinthehatsite

I am wondering if the responsive mode toggle should have some label when the menu is closed and you hover over it. It was not immediately clear what it does when you hover and inspect the toolbar:

katinthehatsite · 2026-08-03T14:29:57Z

+	background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
+}
+
+/* The split view's phone pane, beside the desktop frame on the shared


I am not sure how useful this responsive mode option is. Mainly because the desktop screen preview is so small that you can't properly see things on it anyway when it is positioned along with the mobile preview screen. You can see example in the screenshot:

To add to that, I think this issue is even more visible when you use desktop + mobile preview in the landscape mode:

I agree the desktop + mobile option doesn't really offer much as it is very hard to see, maybe when we have the full preview panel implemented. Removed for now. cc @shaunandrews

As for the responsive menu, I think it's useful as a developer to be able to confirm the layout easily in different screen sizes.

katinthehatsite

Another observation (which is not a big deal): I noticed that if you select a preview mode, and then navigate to a different site where you select another preview mode, and come back to site A, the site A does not have the preview mode you initially selected and resets to fit pane. I think it can be left as is but just adding it as an observation

…sponsive-preview-modes-and-the-view-menu

…t view

…n' into stu-2089-add-responsive-preview-modes-and-the-view-menu # Conflicts: # apps/ui/src/components/site-preview/index.tsx

bcotrim · 2026-08-03T17:03:33Z

I am wondering if the responsive mode toggle should have some label when the menu is closed and you hover over it. It was not immediately clear what it does when you hover and inspect the toolbar:

Following the exploration design, the menu is going to have more options. I think it's fair to keep the 3 dots for now, hovering should show "More options". @shaunandrews do you have any feedback regarding this menu?

bcotrim · 2026-08-03T17:06:53Z

Another observation (which is not a big deal): I noticed that if you select a preview mode, and then navigate to a different site where you select another preview mode, and come back to site A, the site A does not have the preview mode you initially selected and resets to fit pane. I think it can be left as is but just adding it as an observation

This is nice, I added this feature to restore the selected mode.

bcotrim · 2026-08-03T17:07:28Z

Thanks for the review @katinthehatsite, can you take another look please? 🙇

sejas

I think this is very useful feature. I think we could even add multiple views at the same time. So users could see how it looks in desktop AND mobile at the same time.

I tested LTR and RTL and worked as expected.

I miss a way to make the preview pane cover the whole app, kind a maximize the preview.

sejas · 2026-08-03T19:44:24Z

+		const webview = ref.current as WebviewTag | null;
+		if ( ! webview ) return;
+		appliedViewportRef.current = Boolean( viewport );
+		void applyWebviewViewport( webview, viewport ).catch( () => undefined );


We can consider adding a bounce, in this use effect.

shaunandrews · 2026-08-03T20:00:15Z

I think it's fair to keep the 3 dots for now, hovering should show "More options". @shaunandrews do you have any feedback regarding this menu?

I might make sense to better surface the responsive features, but for now lets stick with the ••• overflow menu to see how people ask for and use these features.

I think we could even add multiple views at the same time. So users could see how it looks in desktop AND mobile at the same time.

This was in the original design; I think it was decided to remove it above until we add the full screen preview.

github-actions Bot assigned bcotrim Jul 28, 2026

bcotrim changed the base branch from trunk to stu-2086-add-open-in-split-button July 28, 2026 11:30

Agentic UI: Add responsive preview modes and the More options menu

13ba2a7

bcotrim force-pushed the stu-2089-add-responsive-preview-modes-and-the-view-menu branch from 68a2066 to 13ba2a7 Compare July 28, 2026 16:22

bcotrim marked this pull request as draft July 28, 2026 16:48

bcotrim added 10 commits July 28, 2026 17:57

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

937d0fb

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

e57133b

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

0bd12c2

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

01e23fa

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

8b23029

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

28bbfaa

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

68d03ee

…sponsive-preview-modes-and-the-view-menu # Conflicts: # apps/ui/src/components/site-preview/index.tsx

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

f61ed69

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

c5ae9d1

…sponsive-preview-modes-and-the-view-menu

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

cbcd258

…sponsive-preview-modes-and-the-view-menu

bcotrim marked this pull request as ready for review July 31, 2026 13:42

trigger ci

ec9c37c

bcotrim requested review from nightnei and sejas August 1, 2026 14:34

katinthehatsite reviewed Aug 3, 2026

View reviewed changes

bcotrim added 3 commits August 3, 2026 16:34

Merge branch 'stu-2086-add-open-in-split-button' into stu-2089-add-re…

78fa505

…sponsive-preview-modes-and-the-view-menu

Agentic UI: Remember the responsive mode per site and remove the spli…

80019f6

…t view

Merge remote-tracking branch 'origin/stu-2086-add-open-in-split-butto…

8db75c8

…n' into stu-2089-add-responsive-preview-modes-and-the-view-menu # Conflicts: # apps/ui/src/components/site-preview/index.tsx

bcotrim requested a review from katinthehatsite August 3, 2026 17:07

sejas approved these changes Aug 3, 2026

View reviewed changes

sejas reviewed Aug 3, 2026

View reviewed changes

bcotrim added 2 commits August 3, 2026 21:48

Agentic UI: Debounce the preview viewport emulation during pane resizes

b13a1bc

trigger ci

fe54b9a

bcotrim mentioned this pull request Aug 3, 2026

Agentic UI: Add the full preview panel and restore the Desktop + Mobile comparison #4423

Draft

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Agentic UI: Add responsive preview modes and the More options menu - #4368

Agentic UI: Add responsive preview modes and the More options menu#4368
bcotrim wants to merge 17 commits into
stu-2086-add-open-in-split-buttonfrom
stu-2089-add-responsive-preview-modes-and-the-view-menu

bcotrim commented Jul 28, 2026 •

edited

Loading

Uh oh!

wpmobilebot commented Jul 28, 2026 •

edited

Loading

Uh oh!

katinthehatsite left a comment

Uh oh!

katinthehatsite Aug 3, 2026

Uh oh!

katinthehatsite Aug 3, 2026

Uh oh!

bcotrim Aug 3, 2026

Uh oh!

katinthehatsite left a comment

Uh oh!

bcotrim commented Aug 3, 2026

Uh oh!

bcotrim commented Aug 3, 2026

Uh oh!

bcotrim commented Aug 3, 2026

Uh oh!

sejas left a comment

Uh oh!

sejas Aug 3, 2026

Uh oh!

shaunandrews commented Aug 3, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

bcotrim commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

wpmobilebot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

katinthehatsite Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

katinthehatsite Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

bcotrim Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

bcotrim commented Aug 3, 2026

Uh oh!

bcotrim commented Aug 3, 2026

Uh oh!

bcotrim commented Aug 3, 2026

Uh oh!

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

sejas Aug 3, 2026

Choose a reason for hiding this comment

Uh oh!

shaunandrews commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bcotrim commented Jul 28, 2026 •

edited

Loading

wpmobilebot commented Jul 28, 2026 •

edited

Loading

shaunandrews commented Aug 3, 2026 •

edited

Loading