fix(web): restore horizontal scrolling in right panel tabs - #5541
Conversation
c2d44a3 moved `drag-region` off the right panel topbar and onto the tab strip's ScrollArea. `-webkit-app-region: drag` swallows pointer and wheel events, so in the desktop app the tab strip stopped scrolling horizontally once the tabs overflowed, leaving later tabs unreachable. Put the drag region back on the topbar container and mark the scroll area no-drag, matching how DiffPanelShell and the chat header already separate the drag surface from interactive children. Browser builds are unaffected: both classes only apply when Electron owns the title bar.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
ApprovabilityVerdict: Approved 3e7fb5a Straightforward CSS fix for Electron titlebar drag behavior. Moves the drag-region to the parent container while opting the scroll container out with You can customize Macroscope's approvability policy. Learn more. |
Problem
The right panel tab strip doesn't scroll horizontally in the desktop app. Once the tabs overflow, the ones past the right edge can't be reached unless you widen the panel or close tabs. Trackpad and wheel do nothing over the strip.
Before
t3code-horizontal-scroll-before.mp4
After
t3code-horizontal-scroll-after.mp4
Cause
c2d44a3 ("Unify compact subheaders and diff file navigation") moved
drag-regionoff the topbar container inRightPanelTabs.tsxand onto the tab strip'sScrollArea:-webkit-app-region: draghands the area to the window manager, so the element stops getting pointer and wheel events. Putting it on the scroll container is what kills the scroll. Browser builds were never affected, sinceownsDesktopTitleBarisisElectron && mode === "inline".Fix
Drag region goes back on the topbar container, the
ScrollAreagets[-webkit-app-region:no-drag]. Same splitDiffPanelShelland the chat header already use: the container drags, the interactive children opt out.The tradeoff is that you can no longer drag the window by the empty space inside the tab strip. The container padding on both sides becomes draggable instead, which it wasn't before, and that empty space only exists when the tabs fit, which is exactly when nobody needs to scroll.
RightPanelTabswas the only drag region in the app wrapping a scroll container. The others (SidebarChrome,NoActiveThreadState, settings,ChatView,DiffPanelShell) wrap buttons and labels, which the.drag-region buttonrule inindex.cssalready excludes.Test
RightPanelTabs.test.tsxrenders the component withisElectronmocked true and checks that the drag region sits on the topbar and not on the scroll container. It fails on the pre-fix component.Also ran
vp test run src/components/RightPanelTabs.test.tsxandtsgo --noEmitinapps/web,vp lint, and the desktop app on macOS for the videos above.8 changed lines in the component, plus the test.
Note
Low Risk
Small Electron-only CSS/class change for titlebar drag vs scroll, with a focused unit test and no auth or data-path impact.
Overview
Fixes horizontal tab scrolling in the Electron desktop app when the right panel owns the title bar.
RightPanelTabsmovesdrag-regionback onto the topbar (data-right-panel-tabbar) and applies[-webkit-app-region:no-drag]on the tab stripScrollAreainstead of putting drag on the scroll container—matchingDiffPanelShell/ chat header so wheel and pointer events reach the scroller.Adds
RightPanelTabs.test.tsx(SSR markup withisElectronmocked) to assert drag stays on the tabbar and the tab list opts out of drag.Reviewed by Cursor Bugbot for commit 3e7fb5a. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Fix horizontal scrolling in
RightPanelTabsscroll area when Electron title bar is activeIn Electron inline mode, the tab bar container was applying
drag-regionto the scroll area, which blocked pointer and wheel events needed for horizontal scrolling. The fix movesdrag-regionto the outer container and applies[-webkit-app-region:no-drag]to theScrollAreainstead, allowing the tab list to receive scroll events while the surrounding bar remains draggable. A new test in RightPanelTabs.test.tsx verifies both classes are applied to the correct elements.Macroscope summarized 3e7fb5a.