Modern UI: Keep connected editor tab widths stable at the right edge - #336885
Open
na2co3 (na2co3-ftw) wants to merge 4 commits into
Open
na2co3 (na2co3-ftw) wants to merge 4 commits into
na2co3 (na2co3-ftw) wants to merge 4 commits into
Conversation
Reserve the terminal shoulder outside the active tab fill instead of shrinking the fill at the right edge.
Update connected-tab layout test inputs and expectations for the additional 5px terminal shoulder space.
Update the connected clipping regression test to assert invalidation and rebuild directly since `connected-tab-right-edge` invalidation no longer changes the fill bounds.
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The selector misses final tabs followed by an add-tab control, and the new !important violates CSS conventions.
Get a fresh assessment by requesting another Copilot review.
Review effort: Balanced
Findings: 1
Open (2)
What changed in this PR
Keeps connected tab surfaces full-width while reserving space for terminal shoulders.
Changes:
- Replaces fill shrinking with tab margins.
- Preserves wrapped-tab action clearance.
- Updates clipping and layout regression tests.
| File | Description |
|---|---|
multiEditorTabsControl.test.ts |
Updates geometry tests and adds wrapped-margin coverage. |
modernUI.contribution.test.ts |
Verifies stable tab and fill bounds. |
connectedEditorTabs.css |
Reserves shoulder space using margins. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Remove `!important` from the Modern UI wrapped-tab margin rule and align the Modern UI selector with the base wrapped-tab rule in multieditortabscontrol.css.
Lee Murray (mrleemurray)
approved these changes
Sep 21, 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
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.
Problem
In Modern UI with conected tabs, selecting the last tab narrows its background to make room for the terminal shoulder.
This makes the hover and active areas inconsistent and can cause the modified indicator to extend beyond the active tab surface.
The hover and active areas of the last tab:
When
workbench.editor.highlightModifiedTabsis enabled:Fix
Clipping Regression Test Update
connected-tab-right-edgeused to shrink.tab-fillby5px. Clearing clipping during a dirty-state update therefore changed the fill bounds, which the existing regression test used to distinguish stale geometry from rebuilt geometry.This PR instead reserves the terminal shoulder with tab
margin-right, so clearing the clipping class no longer changes fill bounds. The test now verifies the actual contract directly: dirty and capability updates clear stale clipping geometry, and the next layout rebuilds it.