feat(desktop): show a hover close button on pane tabs - #89428
Merged
Conversation
Each closeable horizontal tab now shows a close button when the pointer is on the tab. A small gradient fades the button into the tab surface, so long labels fade under it instead of a hard clip. The gradient reads the tab's effective surface color. This color tracks the hover and selection washes, so the fade is correct on every theme. Middle-click and Cmd-click still close the tab. Vertical rail tabs keep those gestures and do not get the button.
Contributor
૮ >ﻌ< ა ci reviewran on 15a9754 — feat(desktop): show a hover close button on pane tabs
|
This was referenced Aug 18, 2026
9 tasks
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 does this PR do?
Each closeable horizontal pane tab now shows a close button on pointer hover.
Before this change, a tab closed only from the context menu, a middle-click, or a ⌘-click. None of these gestures is visible in the UI.
The button is an overlay on the right edge of the tab. A small gradient fades the button into the tab surface, so a long label fades under it instead of a hard clip.
The gradient reads the
--tab-facevariable. This variable holds the effective surface color of the tab. It tracks the hover wash and the selection wash. As a result, the fade is correct on every theme and skin.The overlay does not change the tab width. The overlay also draws the accent underline of the active tab again. Without this, the button cuts a notch in the underline.
Vertical rail tabs do not show the button. The middle-click and ⌘-click gestures continue to operate on all tabs.
unhovered

hovering active tab

hovering inactive tab

dark theme


Related Issue
No issue exists for this change.
Related work
PRs #69392 and #89243 add a hover close button to the same component. Each of them reserves a permanent slot in the tab, which makes the label area smaller at all times. This PR paints the button over the label and adds the gradient fade. PR #83051 has a much larger scope: close controls with focus recovery across 37 files.
closes #69392
closes #89243
Type of Change
Changes Made
apps/desktop/src/components/ui/pane-tab.tsx: add the hover close button, the gradient runway, and the--tab-facevariable.apps/desktop/src/components/ui/pane-tab.test.tsx: add three tests for the button.How to Test
apps/desktop, runnpx vitest run src/components/ui/pane-tab.test.tsx. All 9 tests pass.Checklist
Code
fix(scope):,feat(scope):, etc.)tsc --noEmit, and eslint all pass.Documentation & Housekeeping
docs/, docstrings) — N/A, the component comments carry the design notescli-config.yaml.exampleif I added/changed config keys — N/ACONTRIBUTING.mdorAGENTS.mdif I changed architecture or workflows — N/AisMetaClosekeeps the ⌘/Ctrl mapping per OSScreenshots / Logs