Repository navigation
feat(header): list tabs that do not fit behind a More button instead of shrinking them - #3199
Merged
Merged
Conversation
…of shrinking them
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 5 minutes. View limit details
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. |
…ed and a touch screen open tab width
Owner
Author
|
Review summary at c7f0ef3:
|
Owner
Author
|
Merge note (merge pass) at head c7f0ef3:
|
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.
What
On a desktop window the header's tab row (#3156) shared its width among every tab, down to 44 px each. With many tabs, the close (×) became most of a tab, so a click meant to open a tab often closed it.
Now:
lib/tabOverflow.tsTAB_MIN_WIDTH, matched instyles.css).+(a chevron and the count, e.g.▾ 16). Its list shows each hidden tab with its agent mark and state, as the phone's tab sheet does. Picking one opens it in the row.drawnTabBoundary), so a drop into the gap where tabs are hidden lands where the line shows.pointer: coarse) the open tab's wider 160 px minimum is counted.Design follows Firefox's "List all tabs" and VS Code's tab overflow rather than Chrome's tabs shrinking to their icon: an Ovis tab is told apart by its name (DESIGN.md updated).
Screenshots (light, test session, 20 tabs)
Desktop 1280 with the More list open, and a 390 phone (unchanged: the header title lists the tabs). Screenshot files are in the lane report.
Review
Validation
scripts/tab-overflow-regression.tson unchanged main fails with20 tabs, the last open: 20 tabs that do not fit show no More button in the header's row. With the change, it passes: no tab under 120 px, no scroll, More counts the hidden tabs, the list shows them in order, pickingmetricsopens it in the row, and 1024 px keeps the minimum. A close shows only on the open tab and the hovered one. The wheel checks now run on a split half's strip.bun test src/lib/tabOverflow.test.ts src/lib/i18n.test.ts src/components/TabStrip.appLayout.test.tsx src/lib/tabOrder.test.ts: 35 pass.bun run check fast: green at 19d7433 and again after merging main at the head.bun test src/lib/tabOverflow.test.ts src/lib/tabOrder.test.ts: the new cases fail on the previous code (2 fail) and pass now.herdr-ci-runner:local, uid 1001): ui-regression, ui-contexts-regression, tab-overflow-regression and the other browser scripts that touch the tab row: ui-regression PASS, ui-contexts-regression PASS (it runs tab-overflow, tab-menu, mobile-tabs, split-view, chat-size), and 12 standalone scripts PASS (agent-lock, herdr-prefix-keys, mirror-fold, palette-machines, pane-lifetime, phone-glass-header, phone-safe-area, phone-split-grid, shortcut-exact-modifiers, sidebar-declutter, workspace-rows, new-session-skills).fulfill: Route is already handled!error, also seen in an earlier run before follow-focus was touched), ui-contexts-regression PASS.follow-focus-regressionnow counts the tabs behind More as listed, andtab-pick.tsgainsclickTab, which opens a tab from the More list when the row is full (used by chat-size's attach lifecycle checks).