fix(web): reserve sibling column width when resizing the right panel

[Lasdw6]

What Changed

The right panel's (diff/preview) resize clamp now reserves a minimum width for its sibling column (the chat, or the pull-request list) instead of only capping at 70% of window.innerWidth.

• getPreviewPanelMaxWidth takes the panel's flex-row width and clamps to rowWidth − 360px, keeping the viewport fraction as a secondary cap and flooring at the panel's own 360px minimum so a too-narrow row cannot invert the resize clamp.
• The row is measured with a shared measure callback (before first paint, then via ResizeObserver), so the clamp reacts to window and sidebar resizes and a persisted over-wide width cannot flash on mount. Measurement is skipped in modes that never apply the width (sheet, embedded, maximized).
• Unit tests cover the fraction cap, the row clamp, and both narrow-row edge cases.

+90/−10 in PreviewPanelShell.tsx and its test file.

Why

Fixes #6181.

The clamp was blind to the app sidebar (which sits outside the 70% math) and to the chat composer's minimum content width. Whenever 0.3 × viewport − sidebar fell below what the composer needs, the composer overflowed the chat panel before the clamp engaged.

That threshold is roughly a 1950px viewport, which is why the issue looked macOS-only: every MacBook — even fullscreen at 1512–1728 logical px — is below it, while typical Windows desktop monitors are above it. Reproduced on Windows 11 at non-maximized window widths and on macOS fullscreen; the drag now hard-stops leaving the sibling column usable on both.

UI Changes

Before/after screenshots and drag recordings are in the comment below (macOS fullscreen, matching the issue's environment).

Checklist

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

Note

Reserve sibling column width when resizing the right preview panel

• Updates getPreviewPanelMaxWidth in PreviewPanelShell.tsx to accept an optional containerWidth and subtract a SIBLING_COLUMN_MIN_WIDTH (360px) reservation, so the preview panel cannot grow into the sibling column's space.
• Replaces the viewport-only useViewportClampedMaxWidth hook with useClampedMaxWidth, which tracks both viewport width and the parent flex-row container width via ResizeObserver and useLayoutEffect to avoid over-wide flashes on mount.
• Measurement is skipped entirely when not in inline non-maximized mode, avoiding unnecessary DOM observation.
• Behavioral Change: in inline non-maximized mode, the panel's max width is now clamped by available container space rather than viewport width alone; the panel will never shrink below its own 360px minimum.

^{Macroscope summarized ee21c84.}

---

Note

Low Risk
Localized UI resize logic in PreviewPanelShell with unit tests; no auth, data, or API changes.

Overview
Fixes preview/diff panel resize so the chat (or PR list) column keeps at least 360px on narrow layouts, instead of only limiting the panel to 70% of the viewport.

getPreviewPanelMaxWidth now takes an optional flex-row width and caps the panel at rowWidth − 360, still bounded by the 70% viewport rule and floored at the panel’s own 360px minimum so max never falls below min on very tight rows.

PreviewPanelShell measures the parent flex row (useLayoutEffect + ResizeObserver, only in inline non-maximized mode) so the clamp tracks window and sidebar changes and persisted widths don’t flash too wide on mount.

^{Reviewed by Cursor Bugbot for commit ee21c84. 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 Plus

Run ID: b5b487cd-c6fb-487a-8fa4-0328a76f33bc

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

---

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 f6d8dff

Straightforward UI bug fix that adds container width measurement to prevent the preview panel from squeezing its sibling column below minimum width. Changes are self-contained to layout constraints with comprehensive test coverage.

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

[Lasdw6]

Before

t3code.before.mov

After

t3code.after.mov