Skip to content

fix(web): restore horizontal scrolling in right panel tabs - #5541

Open
Radu028 wants to merge 1 commit into
pingdotgg:mainfrom
Radu028:fix/right-panel-tab-horizontal-scroll
Open

fix(web): restore horizontal scrolling in right panel tabs#5541
Radu028 wants to merge 1 commit into
pingdotgg:mainfrom
Radu028:fix/right-panel-tab-horizontal-scroll

Conversation

@Radu028

@Radu028 Radu028 commented Aug 6, 2026

Copy link
Copy Markdown

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-region off the topbar container in RightPanelTabs.tsx and onto the tab strip's ScrollArea:

-  ownsDesktopTitleBar && "drag-region wco:pr-[...]",     // topbar container
+  ownsDesktopTitleBar && "wco:pr-[...]",
...
-  className="min-w-0 flex-1 rounded-none"
+  className={cn("min-w-0 flex-1 rounded-none", ownsDesktopTitleBar && "drag-region")}

-webkit-app-region: drag hands 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, since ownsDesktopTitleBar is isElectron && mode === "inline".

Fix

Drag region goes back on the topbar container, the ScrollArea gets [-webkit-app-region:no-drag]. Same split DiffPanelShell and 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.

RightPanelTabs was 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 button rule in index.css already excludes.

Test

RightPanelTabs.test.tsx renders the component with isElectron mocked 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.tsx and tsgo --noEmit in apps/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.

RightPanelTabs moves drag-region back onto the topbar (data-right-panel-tabbar) and applies [-webkit-app-region:no-drag] on the tab strip ScrollArea instead of putting drag on the scroll container—matching DiffPanelShell / chat header so wheel and pointer events reach the scroller.

Adds RightPanelTabs.test.tsx (SSR markup with isElectron mocked) 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 RightPanelTabs scroll area when Electron title bar is active

In Electron inline mode, the tab bar container was applying drag-region to the scroll area, which blocked pointer and wheel events needed for horizontal scrolling. The fix moves drag-region to the outer container and applies [-webkit-app-region:no-drag] to the ScrollArea instead, 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.

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.
@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown

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 Plus

Run ID: d0b7b4fe-0b73-423f-8b83-77d8d7f56888

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

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.

@macroscopeapp

macroscopeapp Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: 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 -webkit-app-region:no-drag, allowing horizontal tab scrolling. Includes a unit test verifying the expected behavior.

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

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant