Allow preview panel to grow on wide displays

[olivoil]

Fixes #3893.

What Changed

Removed the fixed 1400px maximum width on the resizable inline right panel. The panel can now use up to 70% of the display.

Why

The right panel hosts the integrated browser. On high-resolution and ultra-wide displays, the fixed 1440px maximum width on the sidebar limited it even while plenty of room remained for chat.

This is highly uncomfortable when the integrated browser is used to display large desktop resolutions, the page in the browser gets so small it's difficult to read, while there are a ton of negative space available around the chat (see screenshots before/after).

Screenshots

After

Maximum sidebar size on a 6k monitor:

Before

Same integrated browser viewport size on the same monitor, constrained as the sidebar does not resize to more than 1440px:

Testing

• vp test apps/web/src/components/preview/PreviewPanelShell.test.ts
• vp check
• vp run typecheck
• Manually verified on a 6K display with the integrated browser at 100% zoom

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes

Note

Allow preview panel to grow beyond 1400px on wide displays

Removes the hard 1400px ceiling from useViewportClampedMaxWidth in PreviewPanelShell.tsx. The max width is now computed by a new getPreviewPanelMaxWidth helper as Math.floor(viewportWidth * 0.7), so the panel scales with the viewport on wide screens. Behavioral Change: panels on viewports wider than ~2000px will now expand beyond 1400px.

^{Macroscope summarized 1846b38.}

---

Note

Low Risk
Small UI layout change to resizable panel bounds only; no auth, data, or API impact.

Overview
Removes the 1,400px cap on the resizable inline preview/right panel so it can use the full 70% of viewport width on ultra-wide displays, leaving ~30% for chat.

Max width is now computed via exported getPreviewPanelMaxWidth (Math.floor(viewportWidth × 0.7)); useViewportClampedMaxWidth delegates to that helper instead of min(1400, 70vw). Unit tests cover a 6K-style viewport and fractional-pixel rounding.

^{Reviewed by Cursor Bugbot for commit 1846b38. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9d5c7380-d144-4d6b-953f-df96c7a6480e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved

Simple UI adjustment removing a hard pixel cap on preview panel width. The change is self-contained, adds unit tests, and only affects how the panel sizes on ultra-wide displays.

^{You can customize Macroscope's approvability policy. Learn more.}