Modern UI tabs: reserve close-button column so it doesn't overlay filename (fix #329605) - #330754
Merged
Lee Murray (mrleemurray) merged 6 commits intoAug 14, 2026
Conversation
Copy link
Copy Markdown
Contributor
Sorry, something went wrong.
…ename The Modern UI tab action overlay (close/pin/dirty) sat on top of the label, so clicking a filename near the trailing edge hit the close control and closed the tab. Reserve the overlay column as padding instead: every tab that can show a trailing close/pin/dirty control now reserves 28px on the right (matching the inset dirty/sticky tabs already used), and left-actions tabs reserve 24px on the left. The absolutely positioned control then renders in the reserved column and never covers the filename hit target. Tabs with close actions off, and dirty tabs that only show the dirty top border, keep the compact close-action-off padding since there is no overlay to reserve. Fixes microsoft#329605
Akshat Anand (cipheraxat)
force-pushed
the
fix/329605-modern-ui-tab-close-overlap
branch
from
2300666 to
9de2f4d
Compare
August 13, 2026 21:58
Copy link
Copy Markdown
Contributor
There was a problem hiding this comment.
Pull request overview
Updates Modern UI tab spacing to prevent trailing actions from overlapping filenames.
Changes:
- Reserves space for close, pin, and dirty controls.
- Updates the overlay documentation.
src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css:166
- The left reserved column is still narrower than the overlaid action surface: .tab-actions is 24px wide with 2px horizontal margins, so when positioned at left: 0 its border box reaches 26px while the label starts after only 24px of padding. This leaves the leading 2px of the filename under the higher-z-index action surface. Reserve 28px on this side as well.
.modern-ui-tabs .part.editor .tabs-container > .tab.tab-actions-left:not(.sticky-compact):not(.close-action-off),
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Sorry, something went wrong.
Comment on lines
+160
to
164
| /* Reserve the overlay column so close/pin/dirty never covers the filename (https://github.com/microsoft/vscode/issues/329605) */ | ||
| .modern-ui-tabs .part.editor .tabs-container > .tab:not(.sticky-compact):not(.tab-actions-left):not(.close-action-off), | ||
| .modern-ui-tabs .part.editor .tabs-container > .tab.sticky:not(.sticky-compact):not(.pinned-action-off):not(.tab-actions-left) { | ||
| padding-right: var(--vscode-spacing-size280) !important; | ||
| } |
The overlaid action surface is 24px wide with 2px horizontal margins, so at left: 0 its border box reaches 26px while the label started after only 24px of padding, leaving the leading 2px of the filename under the action surface. Match the trailing column (28px) so the label clears the overlay with the same 2px gap on both sides.
A dirty tab with close-action-off still renders the dirty dot in the overlay unless dirty-border-top is set (the tab action is always added because it carries the dirty indicator, and the base stylesheet only hides it for close-action-off tabs that are not dirty or show the dirty top border). Restoring the dirty selectors so those tabs keep the reserved column and the dot does not cover the filename.
Lee Murray (mrleemurray)
approved these changes
Aug 14, 2026
Lee Murray (mrleemurray)
left a comment
Copy link
Copy Markdown
Contributor
There was a problem hiding this comment.
Thanks!
Sorry, something went wrong.
Giuseppe Cianci (Giuspepe)
approved these changes
Aug 14, 2026
Christof Marti (chrmarti)
approved these changes
Aug 14, 2026
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
Reviewers
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.
Fixes #329605
Problem
In Modern UI, the tab action overlay (close/pin/dirty control) is absolutely positioned on top of the tab label, so clicking a filename near the trailing edge of a tab hits the close control and closes the tab unexpectedly.
Fix
Reserve the overlay column as padding instead of letting the control overlap the label:
Tabs with close actions off — and dirty tabs that only show the dirty top border — have no overlay to reserve, so they keep the compact close-action-off padding.
Verification
Tested locally with a Code OSS build (Playwright-driven): with the fix, hovering a tab reveals the close control inside the reserved column, and clicking the filename region no longer triggers tab closure; hit-testing the label area returns the label element, not the close action.
Test plan