fix(web): prevent composer controls overlap on narrow windows (make plan sidebar responsive)

[UtkarshUsername]

You can view my issues and PRs at https://pr-navigator.pages.dev/t3code-utkarsh
Fixes #1197

What Changed

This PR makes the plan sidebar follow the same responsive behavior as the diff panel.

• added shared right-panel responsive constants for the breakpoint and sheet sizing
• updated the diff panel to use the shared constants instead of hardcoding them locally
• updated the plan sidebar to render inline on wide screens and as a right-side sheet on narrower screens
• added a simple mode prop to PlanSidebar so the same component can render correctly in both inline and sheet contexts
• kept the existing open/close and dismissal behavior for active plans intact

Made it turn into a sheet like the diff panel instead of just adjusting the composer controls, because this improves the whole experience on small windows and makes the design consistent, while also fixing the problem.

Why

Before this change, the plan sidebar always consumed inline width as a fixed column. On smaller viewports that made the chat area and composer noticeably cramped, while the diff panel already handled the same problem better by switching to a sheet.

Using the same responsive pattern for both panels keeps the UI more consistent and avoids penalizing smaller layouts.

UI Changes

Before:
(Video shared by Julius)
https://github.com/user-attachments/assets/6d83f027-ec3e-4026-8c8a-6130cc70a932

After:

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

Make the plan sidebar render as an overlay sheet on narrow viewports

• On viewports ≤1180px, PlanSidebar now renders inside a right-side Sheet overlay instead of as a fixed inline panel; wider viewports keep the existing inline layout.
• A new mode prop on PlanSidebar switches between a fixed-width bordered layout (sidebar) and a full-width borderless layout (sheet).
• Shared constants RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY and RIGHT_PANEL_SHEET_CLASS_NAME are extracted to rightPanelLayout.ts and reused by the existing diff panel sheet.

^{Macroscope summarized ec1aada.}

---

Note

Low Risk
UI-only layout changes that affect how the plan sidebar/diff panel render on narrow viewports; low risk aside from potential responsive/regression issues in panel open/close behavior.

Overview
Makes the Plan sidebar responsive: it now renders inline on wide screens but switches to a right-side Sheet overlay on viewports matching RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, reducing composer/chat crowding on narrow windows.

Extracts shared right-panel constants into rightPanelLayout.ts (breakpoint + sheet sizing class) and updates the diff panel sheet to reuse them; adds a mode prop to PlanSidebar so the same component styles correctly in both sidebar and sheet contexts, with close/dismissal behavior centralized via closePlanSidebar.

^{Reviewed by Cursor Bugbot for commit ec1aada. 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: 80230722-a2be-4723-91e1-d758be5fed16

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 and usage tips.}

[macroscopeapp]

Approvability

Verdict: Approved

This is a straightforward UI responsiveness fix that makes the plan sidebar display as a sheet/drawer on narrow windows, mirroring the existing pattern used for the DiffPanel. The changes are self-contained, follow established patterns, and have no backend or state logic implications.

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

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ec1aada. Configure here.}

[cursor]

PlanSidebarSheet duplicates existing DiffPanelSheet component

Low Severity

PlanSidebarSheet is structurally identical to DiffPanelSheet in the route file — both wrap children in a Sheet + SheetPopup with the same side, showCloseButton, keepMounted, and RIGHT_PANEL_SHEET_CLASS_NAME props, differing only in prop naming. Since the PR already extracted shared constants into rightPanelLayout.ts, this wrapper component is the natural next candidate for sharing, avoiding duplicated logic and ensuring future changes (e.g., adding an overlay style) only need to happen in one place.

Additional Locations (1)

• apps/web/src/routes/_chat.$environmentId.$threadId.tsx#L35-L60

 

^{Reviewed by Cursor Bugbot for commit ec1aada. Configure here.}