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 plan sidebar responsive by rendering it as a sheet overlay on narrow windows

• On viewports ≤1180px, the plan sidebar now renders as a right-side sheet overlay instead of an inline sidebar; wider viewports keep the existing inline layout.
• Adds a mode prop to PlanSidebar ("sidebar" | "sheet") to switch between fixed-width sidebar styling and full-width sheet styling.
• Extracts shared layout constants (RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY, RIGHT_PANEL_SHEET_CLASS_NAME) into rightPanelLayout.ts and reuses them for the existing diff panel sheet in _chat.$threadId.tsx.

^{Macroscope summarized b364790.}

[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: aff41b0a-9e95-4b8e-bc08-f27aff88ba27

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.