Repository navigation
🤖 feat: thinner right sidebar tabs on tablets, touch resize, All tabs menu with New tab - #6995
Merged
Merged
Conversation
… menu On an iPad (coarse pointer above the phone breakpoint) the right sidebar's tab strip was 57px tall with 44px tabs, the 2px resize handle could not be dragged with a finger, and tabs scrolled out of the narrow row were hard to reach. - Tab strip: tablets keep the desktop row height (strip 37px, tabs 24px) and size the tab X, "+", All tabs and collapse buttons to the 24px WCAG minimum (TABLET_TOUCH_TARGET_PX). Phones keep their 44px touch floor. - Resize: useResizableSidebar listens to pointer events (useResizeDragListeners) so touch and pen drags work; it follows only the pointer that started the drag and ends on pointercancel. Both handles get touch-action: none. Coarse pointers get a 12px handle with a grip; the sidebar hands its left border to the handle (:has() rule) so the strip's bottom border still meets the line. - All tabs: a ChevronDown button at the strip's right end (2+ tabs) opens a menu of every tab. It opens on the selected row, arrow keys move between rows, and a pick selects the tab, focuses it and scrolls it into view. Terminal and side chat rows render their labels without their buttons (menuLabel). Tests: hook tests for pointer filtering and pointercancel; strip stories for the phone/tablet target contract, the All tabs pick and the one-tab case; the Storybook test-runner checks the tablet strip height and targets under touch emulation and drags the right sidebar handle with real CDP touch input. The Narrow swipe check taps the last tab's visible part, since the phone row is now narrower than a long tab.
…rip's "+" The strip's "+" took a 24px slot from the tab row on every screen, and the All tabs chevron only showed with 2+ tabs. On a phone or a narrow pane the row has room for a tab or two, so the end controls should be as few as possible. - All tabs is always there, also with one tab. Its menu lists the open tabs (not the New tab), a separator, then a "New tab" row that opens or shows the tabset's New tab and moves focus into its launcher. The row is checked when the New tab is selected, carries aria-keyshortcuts and shows the shortcut hint (hidden on phones). - The "+" button is gone. The shortcut and the command palette action stay. - A pick moves focus out of the menu, and Radix then does not refocus the trigger, so the pickedRef/onCloseAutoFocus guard is gone. - revealSelectedTab uses smaller fade margins for a tab too wide for both, so a long tab fits whole (its X included) when the row can hold it. Tests and docs follow: stories, UI tests, the e2e helper and the bug-bash repros open the New tab through the menu; keybinds.mdx mentions the menu.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: aee1d20cbb
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Contributor
Author
|
@codex review Both findings are answered in their threads with test evidence (no code change), so this asks for a verdict on the same head, |
|
Codex Review: Didn't find any major issues. What shall we delve into next? Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
🛡️ Codex Security Review · Automatically triggeredSecurity review completed. No security issues were found in this pull request. Reviewed commit: Only the user who started this review can view the report in Codex. ℹ️ About Codex security reviews in GitHubThis is an experimental Codex feature. Security reviews are triggered when:
Once complete, Codex will leave suggestions, or a comment if no findings are found. |
This was referenced Oct 18, 2026
github-merge-queue Bot
pushed a commit
that referenced
this pull request
Oct 21, 2026
## Summary The right sidebar's tab strip has a "+" (New tab) button again, right after the last tab, like the ChatGPT macOS app. Before, New tab was only a row at the bottom of the All tabs (chevron) menu. The chevron menu stays, so tabs that scroll out of view are still one pick away. It now lists every open tab, the New tab too. | Desktop | Narrow strip (390px viewport) | | --- | --- | |  |  | ## Background #6995 moved New tab into the All tabs menu and removed the strip's "+" on every screen. A New tab hidden in a menu is hard to find, so the "+" is back. ## Implementation - `NewTabButton` sits outside the scrolling row, as a sibling of the tablist, so the tablist still owns only tabs. While the tabs fit, it follows the last tab. Once they overflow, the row scrolls and the "+" stays in view. - It uses the strip's icon-button style, so it gets the 24px coarse-pointer target and the desktop no-drag region. Its tooltip shows the New tab shortcut (hidden on phones), and it sets `aria-keyshortcuts`. - The All tabs menu has no New tab row now, so no separator is needed. - Test helpers (jest UI, Storybook plays, Playwright, bug-bash repros) now open the New tab with the "+". ## Validation - Storybook interaction tests for the tab strip, RightSidebar, the seeded a11y pages, phone full-screen and phone viewports pass. The tablet touch-target check in `.storybook/test-runner.ts` now also covers the "+". - Jest UI suites: `layout/rightSidebar`, `review/focus`, `review/baseSelector` and `chat/contextUsageBoot` pass. - Bug bash in the sandbox: I ran 5 charters on this branch (mouse, keyboard, overflow plus reload, phone, split panes) with Sonnet 5.5 and the real app AI. They found 0 issues. One run cost $3.48 at list price. The run also gave 2 warnings, and both are older than this PR: - The tablist does not handle ArrowLeft and ArrowRight. I filed this as an issue (linked in a comment below). - Escape does not close a New tab. I rejected this one, because Escape closes no other tab. ## Risks Low, limited to the right sidebar's tab strip. The "+" takes about 26px from the tab row. On a pane at its minimum width, a long tab (240px) can show cut off at its end. I kept the 10rem cap of `titlebar-safe-right-capped`: a larger cap would put strip controls under the Windows/Linux window controls at the 300px minimum width. So these stories now check what still holds: - `Narrow` is 330px wide (was 300px), so its 240px tab still fits beside "+" and All tabs. - `TabsReachableUnderWideTitlebarInset` checks that the selected tab can be clicked, not that it is fully visible. --- _Generated with `xum` • Model: `anthropic:claude-opus-5-5` • Thinking: `high` • Cost: `$3.03`_ <!-- mux-attribution: model=anthropic:claude-opus-5-5 thinking=high costs=3.03 -->
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
On an iPad the right sidebar's tab strip is now as thin as on desktop, the sidebar can be resized with a finger, and a chevron at the strip's right end lists every open tab with New tab at the bottom. The strip's "+" button is gone on every screen.
Background
In the iPadOS PWA the strip used the phone touch floor: 44px tabs in a 57px strip. The 2px resize handle listened only to mouse events, so a finger drag did nothing. A narrow pane shows a tab or two, and touch users may not know that the row scrolls sideways. The "+" button also took a slot from that row on every screen.
Implementation
TABLET_TOUCH_TARGET_PX, the WCAG 2.2 minimum). Phones keep their 44px floor.useResizableSidebarlistens to pointer events, so touch and pen drags work. It follows only the pointer that started the drag and ends onpointercancel. Coarse pointers get a 12px handle with a grip. The sidebar hands its left border to the handle, so the strip's bottom border still meets the line.aria-keyshortcutsand as a visible hint (hidden on phones). The menu opens on the selected row, and arrow keys move between rows.Validation
NewTabLauncherstory checks that the launcher keeps focus after the menu unmounts.make test-bugbash-repros(mock AI): 74 tests pass.Risks
Low and UI only. Opening a New tab from the strip now takes two clicks (chevron, then New tab) instead of one. The shortcut and the palette action still take one step. Every screen changes, desktop included: no "+", and the chevron shows with one tab.