Skip to content

Add resizable inline right panels#2512

Open
shivamhwp wants to merge 10 commits intopingdotgg:mainfrom
shivamhwp:right-sidebar-resize-fix
Open

Add resizable inline right panels#2512
shivamhwp wants to merge 10 commits intopingdotgg:mainfrom
shivamhwp:right-sidebar-resize-fix

Conversation

@shivamhwp
Copy link
Copy Markdown
Collaborator

@shivamhwp shivamhwp commented May 5, 2026

  • Wrap plan and diff sidebars in a shared resizer
  • Persist widths as ratios in local storage
  • Simplify sidebar layout to use full-width content

What Changed

Added a reusable resizable right-panel wrapper and used it for the inline plan/tasks sidebar and inline diff panel. The panel now defaults to 40% of the available chat area, can be resized between 30% and 80%, and persists the chosen width separately for plan/tasks and diff panels.

Why

The plan/tasks sidebar was fixed-width, so users could not adjust the space split between the conversation and the right-side detail panel. A percentage-based resizer matches the requested behavior and keeps the layout proportional when the window or left sidebar changes.

UI Changes

Screen.Recording.2026-05-05.at.7.34.29.AM.mov

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

Medium Risk
Introduces new pointer-driven resizing logic and localStorage persistence for sidebar widths, which can affect layout behavior across screen sizes and input devices. Risk is moderate due to UI interaction complexity but remains confined to chat right-panel rendering.

Overview
Adds a shared ResizableRightPanel wrapper to make inline right-side panels draggable-resizable, persisting width as a clamped ratio (default 40%, 30–80%) in localStorage.

Updates the chat plan/tasks sidebar and the inline diff viewer to use this wrapper (with new *_width_ratio keys), and adjusts PlanSidebar sidebar mode to fill its container rather than enforce a fixed width. The diff route’s inline panel implementation is simplified by removing the previous SidebarProvider/pixel-constraint resizer in favor of the new ratio-based panel.

Reviewed by Cursor Bugbot for commit 52721c9. Bugbot is set up for automated code reviews on this repo. Configure here.

Note

Add resizable inline right panels for Plan and Diff sidebars

  • Introduces ResizableRightPanel, a generic draggable panel that clamps its width ratio between 30%–80% and persists it to localStorage.
  • Wraps the inline Plan sidebar in ResizableRightPanel (stored under chat_plan_sidebar_width_ratio); PlanSidebar drops its fixed 340px width in favor of w-full.
  • Replaces the SidebarProvider-based inline diff panel in _chat.$environmentId.$threadId.tsx with ResizableRightPanel (stored under chat_diff_sidebar_width_ratio), removing previous pixel-based min/max width constraints.
  • Behavioral Change: both inline panels no longer have fixed pixel widths; users can drag to resize and the last width is restored on reload.

Macroscope summarized 52721c9.

shivamhwp added 2 commits May 5, 2026 07:31
- Wrap plan and diff sidebars in a shared resizer
- Persist widths as ratios in local storage
- Simplify sidebar layout to use full-width content
- Coalesce width ratio updates through a single commit helper
- Keep the ref and React state in sync during pointer-driven resizing
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 5, 2026

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: c2e02be8-1007-4f68-a086-2043b9a3392f

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. labels May 5, 2026
Comment thread apps/web/src/components/ResizableRightPanel.tsx
…e-fix

# Conflicts:
#	apps/web/src/routes/_chat.$environmentId.$threadId.tsx
Comment thread apps/web/src/routes/_chat.$environmentId.$threadId.tsx
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp Bot commented May 5, 2026

Approvability

Verdict: Needs human review

Introduces new user-facing behavior (resizable right panels) via a new component. While implementation is clean and simplifies existing code, new UI capabilities warrant human review.

You can customize Macroscope's approvability policy. Learn more.

Comment thread apps/web/src/routes/_chat.$environmentId.$threadId.tsx
macroscopeapp[bot]
macroscopeapp Bot previously approved these changes May 5, 2026
@macroscopeapp macroscopeapp Bot dismissed their stale review May 5, 2026 04:54

Dismissing prior approval to re-evaluate 385b32c

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes May 5, 2026
Comment thread apps/web/src/routes/_chat.$environmentId.$threadId.tsx
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

Fix All in Cursor

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

Reviewed by Cursor Bugbot for commit 01315d1. Configure here.

Comment thread apps/web/src/components/ResizableRightPanel.tsx
Comment thread apps/web/src/components/ResizableRightPanel.tsx
shivamhwp added 2 commits May 9, 2026 20:59
- Guard body style cleanup to avoid leaking resize cursor state
- Keep the diff sidebar mounted when closed so width is preserved
@macroscopeapp macroscopeapp Bot dismissed their stale review May 9, 2026 16:03

Dismissing prior approval to re-evaluate 52721c9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant