fix(desktop): keep resizable sidebar rail off adjacent scrollbars

[xipeng-jin]

• Description: The right resizable sidebar rail was overlapping the main chat pane’s native scrollbar, so hovering the scrollbar showed the resize cursor and dragging resized the sidebar instead of scrolling. The previous selector set also did not explicitly position rails for collapsible="icon" collapsed sidebars.

• What changed: This updates the shared sidebar rail selectors so expanded left/right sidebars keep the rail fully inside the sidebar edge, offcanvas-collapsed rails stay non-interactive, and collapsed-icon sidebars get explicit rail and divider positioning. It also adds regression coverage for rail placement and resizing behavior so current and future side panels inherit the fix without route-specific workarounds.

What Changed

Moved SidebarRail positioning into explicit selector sets in the shared sidebar component so the expanded rail sits inside the sidebar boundary instead of overlapping the adjacent pane. Added explicit collapsed-icon positioning for both left and right sidebars, while keeping offcanvas-collapsed rails non-interactive.

Added regression tests for:

• static rail class output in sidebar.test.tsx
• browser-level hit testing to verify the main pane edge is no longer captured by the rail
• browser-level resize behavior to confirm the rail still resizes correctly from inside the sidebar edge

Why

When the right diff sidebar was open, the resize rail extended over the main chat pane’s native scrollbar. That made the scrollbar effectively unclickable because pointer hover and drag were captured by the rail instead.

Fixing this in the shared sidebar component is the right scope because the problem is structural, not specific to the diff panel. Any future right-side panel using the same sidebar rail would otherwise inherit the same bug.

UI Changes

Before:

• Hovering the main chat pane scrollbar with the right sidebar open showed the resize cursor.
• Dragging the scrollbar resized the sidebar instead of scrolling.

After:

• The main chat pane scrollbar remains clickable and draggable with the right sidebar open.
• The sidebar can still be resized from its own inside edge.

Screenshots/video to attach:

• Before

t3code-fix-side-scrollbar.before.mp4

• After

t3code-fix-side-scrollbar.after.mp4

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
Changes shared SidebarRail positioning/interaction CSS, which can affect resize/toggle hit targets across all desktop sidebars. Adds coverage, but regressions could impact basic navigation/resizing UX.

Overview
Fixes desktop resizable sidebar rails so the expanded rail sits fully inside the sidebar edge (left and right) instead of overlapping the adjacent pane’s scrollbar hit area.

Refactors SidebarRail class logic into shared selector constants, adds explicit positioning for collapsible="icon" collapsed sidebars, and keeps offcanvas-collapsed rails non-interactive.

Adds regression tests: static markup assertions for the new rail selectors and a new Vitest browser test that hit-tests the main pane edge and verifies resizing still works from inside the sidebar boundary.

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

Note

Fix SidebarRail positioning to avoid overlapping adjacent scrollbar hit targets

• Repositions the expanded SidebarRail to sit fully inside the sidebar edge (left-0/right-0) instead of straddling the boundary, preventing it from intercepting clicks on adjacent scrollbars.
• Collapsed offcanvas rails are pushed to a negative offset (-left-2/-right-2) and set to pointer-events-none so they don't intercept any interaction.
• The rail's divider pseudo-element is aligned to the inside edge rather than centered on the rail.
• Adds browser-based Vitest tests in sidebar.browser.tsx verifying the rail does not overlap the main pane scrollbar, and unit tests in sidebar.test.tsx asserting correct class selectors for both sides and states.
• Behavioral Change: the rail divider and interactive hit area are now entirely inside the sidebar boundary in expanded state.

^{Macroscope summarized 8deb692.}

[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: 33caead3-7bda-4609-83d2-065dd3ba1fa9

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 CSS-only positioning fix that keeps the sidebar rail from overlapping adjacent scrollbars. The production code change is minimal (reorganizing CSS positioning classes), with comprehensive browser and unit tests added. No runtime behavior or logic changes.

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