Sign up
View stargazersSign up

fix(web): make right panel tabs easier to scroll#9461

merged2
main
GitHub fork: t3code/improve-right-panel-tab-scrolling
openedSep 3, 2026byMmaria
1 files changed
View on GitHubTwo-way sync enabledPR last imported 21d ago

Horizontal overflow in the right-panel tabs was difficult to navigate with a Mac trackpad and inaccessible to ordinary mouse wheels. The strip now consumes either wheel axis consistently, keeps the Electron drag region away from the scrolling surface, and shows edge-aware scroll arrows only when tabs overflow. Verified with the web typecheck, focused lint and format checks, the existing RightPanelTabs tests, and real-app wheel and arrow passes at desktop and responsive sheet sizes.

Before

https://github.com/user-attachments/assets/b5c103d4-a74d-4426-a12d-8fd774ca9b71

After

https://github.com/user-attachments/assets/21d703d6-6fa3-4b5f-a000-378ce585acbe

Built by gpt-5.6-sol in the Codex harness.

Note

Low Risk Localized UI interaction changes in RightPanelTabs with no auth, data, or API impact; main risk is wheel/drag-region edge cases on Electron.

Overview Improves horizontal navigation when the right-panel tab strip overflows.

Wheel and trackpad: The tab list viewport now maps the dominant wheel delta (horizontal or vertical) into horizontal scroll, with preventDefault only when scrolling actually moves—so mouse wheels and awkward trackpad gestures can move tabs without relying on hidden scrollbars.

Overflow UI: A ResizeObserver plus scroll listeners track overflow and edge position; when tabs don't fit, left/right chevron buttons appear (disabled at the ends) and scroll by ~75% of the viewport width, respecting prefers-reduced-motion. Active-tab scrollIntoView runs only when overflow is present.

Electron title bar: The window drag region sits on the outer tab bar while the scrollable ScrollArea is marked no-drag, so users can scroll tabs without fighting window dragging on desktop.

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

Note

Add scroll buttons and wheel-scroll support to RightPanelTabs

  • Adds left and right scroll buttons to RightPanelTabs that appear when tabs overflow, disabling at the scroll boundaries.
  • Adds a non-passive wheel listener to convert wheel input into horizontal tab scrolling, preserving pinch zoom and native page scrolling when no tab scroll occurs.
  • Moves the Electron drag-region from the ScrollArea to the surrounding tab bar, marking the viewport and buttons as no-drag.
  • Risk: The non-passive wheel listener calls preventDefault on the tab viewport in RightPanelTabs.tsx, which could block page scrolling if the container's overflow state changes.

Macroscope summarized 238a84d.

Added 1 commit

  • fix(web): make right panel tabs easier to scrollb586983
Ccursor[bot]reviewed · 2 inline threadsSep 3, 2026
Synced from GitHub

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

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 b586983022a4a031ce43abae99b21048a7477220. Configure here.

apps/web/src/components/RightPanelTabs.tsxline 952Outdated · b586983Open thread
……@@ -890,6 +934,45 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
949+ resizeObserver.disconnect();
950+ viewport.removeEventListener("scroll", updateTabScrollState);
951+ };
952+ }, [updateTabScrollState]);
Ccursor[bot]on line 952Sep 3, 2026

Arrows clip the active tab

Medium Severity

scrollIntoView runs against the tab strip before overflow arrows mount. Those controls then shrink the viewport, and the active-tab effect does not run again, so a newly opened or trailing tab can end up clipped under the arrows with no follow-up scroll.

Additional Locations (1)

Reviewed by Cursor Bugbot for commit b586983022a4a031ce43abae99b21048a7477220. Configure here.

MmariaSep 3, 2026

Note

Written by gpt-5.6-sol on behalf of Maria

fixed in 238a84d. active-tab reveal now reruns after the overflow controls mount. a real-app pass kept the active tab fully visible through each transition into overflow.

apps/web/src/components/RightPanelTabs.tsxline 1226Outdated · b586983Open thread
……@@ -1099,6 +1186,46 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
1223+ <ChevronRight />
1224+ </TooltipTrigger>
1225+ <TooltipPopup>Scroll tabs right</TooltipPopup>
1226+ </Tooltip>
Ccursor[bot]on line 1226Sep 3, 2026

Disabled arrows block their tooltips

Low Severity

Each overflow arrow puts TooltipTrigger on a Button that is disabled at a scroll edge. Disabled buttons use pointer-events-none, so the trigger never receives hover or focus and the tooltip cannot open.

Triggered by learned rule: Base UI Dialog: keeping subtree mounted during exit transition is safe — keepMounted={false} handles cleanup

Reviewed by Cursor Bugbot for commit b586983022a4a031ce43abae99b21048a7477220. Configure here.

MmariaSep 3, 2026

Note

Written by gpt-5.6-sol on behalf of Maria

fixed in 238a84d. each tooltip now targets a pointer-enabled wrapper around the disabled button. the disabled-edge tooltip opened in the real-app pass.

MmacroscopeappBotSep 3, 2026
Synced from GitHub

Approvability

Verdict: Approved at 238a84d

Macroscope's review found this PR approvable — This is a localized right-panel UX adjustment that adds overflow-aware tab scrolling and controls without changing application data, defaults, or broader workflows. The runtime impact is confined to tab navigation and Electron title-bar hit-testing.

You can add or adjust custom eligibility rules. Learn more.

Added 1 commit

  • fix(web): keep overflowing tabs accessible238a84d