Skip to content

editor: align connected tab geometry across wrapped states #339028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cherry Wang (chryw) merged 4 commits into from
Oct 1, 2026
+1,035 −1,181
Merged

editor: align connected tab geometry across wrapped states #339028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
19f802d
editor: align connected tab geometry across wrapped states
chryw Oct 1, 2026
e5dd104
editor: curate tab layout fixtures
chryw Oct 1, 2026
3addb96
editor: fix wrapped tab state ownership
chryw Oct 1, 2026
b0b4e1c
editor: include tab padding in wrap constraints
chryw Oct 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/vs/sessions/contrib/editor/test/browser/editorHeader.fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Codicon } from '../../../../../base/common/codicons.js';
import { URI } from '../../../../../base/common/uri.js';
import { localize2 } from '../../../../../nls.js';
import { MenuId, MenuRegistry } from '../../../../../platform/actions/common/actions.js';
import { renderEditorTabBarFixture } from '../../../../../workbench/test/browser/componentFixtures/editor/editorTabBar.fixture.js';
import { renderEditorTabsFixture } from '../../../../../workbench/test/browser/componentFixtures/editor/tabs.fixture.js';
import { ComponentFixtureContext, defineComponentFixture, defineThemedFixtureGroup } from '../../../../../workbench/test/browser/componentFixtures/fixtureUtils.js';

const primaryMenu = MenuId.for('sessions.fixture.editorHeaderPrimary');
Expand Down Expand Up @@ -86,7 +86,7 @@ MenuRegistry.appendMenuItem(addTabMenu, {
function renderHeader(ctx: ComponentFixtureContext, breadcrumbs: boolean, primaryAction: boolean, secondaryAction = false, layoutActions = false, showTabs: 'multiple' | 'single' | 'none' = 'multiple', addTab = false, tabHeight: 'default' | 'compact' = 'default', headerWidth?: number, reserveHeaderSpace = false): void {
ctx.container.classList.add('agent-sessions-workbench', 'dock-detail-panel');

renderEditorTabBarFixture(ctx, {
renderEditorTabsFixture(ctx, {
modernUI: true,
partOptions: { showTabs, tabHeight },
breadcrumbs: breadcrumbs ? { filePath: 'on', icons: true } : undefined,
Expand All @@ -105,7 +105,7 @@ function renderHeader(ctx: ComponentFixtureContext, breadcrumbs: boolean, primar

function renderConnectedCard(ctx: ComponentFixtureContext, secondTabActive = false): void {
ctx.container.classList.add('agent-sessions-workbench', 'dock-detail-panel');
renderEditorTabBarFixture(ctx, {
renderEditorTabsFixture(ctx, {
modernUI: true,
width: 358,
editors: [
Expand Down
12 changes: 11 additions & 1 deletion src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2104,6 +2104,15 @@ export class MultiEditorTabsControl extends EditorTabsControl {
tab.classList.toggle('connected-tab-upper-row', connected && (upperTabBar || tab.offsetTop !== bottom));
tab.classList.toggle('connected-tab-top-row', connected && topTabBar && tab.offsetTop === top);
});
const connectedTabsWrapping = connected && Array.from(this.parent.children).some(element =>
isHTMLElement(element) &&
element.classList.contains('tabs-and-actions-container') &&
element.classList.contains('wrapping')
);
this.parent.classList.toggle('connected-tabs-wrapping', connectedTabsWrapping);
const overflow = connected && tabsWrapMultiLine ? 'visible' : 'hidden';
assertReturnsDefined(this.tabsContainer).style.overflow = overflow;
assertReturnsDefined(this.tabsScrollbar).getDomNode().style.overflow = overflow;
if (!tabsWrapMultiLine) {
this.doLayoutTabsNonWrapping(options);
} else {
Expand Down Expand Up @@ -2244,7 +2253,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
// Tabs wrap multiline: remove wrapping under certain size constraint conditions
if (tabsWrapMultiLine) {
if (
(tabsContainer.offsetHeight > dimensions.available.height) || // if height exceeds available height
(tabsAndActionsContainer.offsetHeight > dimensions.available.height) || // if the complete wrapped title exceeds available height
(allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.tabHeight) || // if wrapping is not needed anymore
(!lastTabFitsWrapped()) // if last tab does not fit anymore
) {
Expand Down Expand Up @@ -2378,6 +2387,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
tabsContainer.classList.remove('disable-sticky-tabs');
}
assertReturnsDefined(this.stickyTabsBackground).style.width = `${stickyTabsWidth}px`;
this.connectedTabOverflowEdge?.classList.toggle('connected-tab-adjacent-sticky', stickyTabsWidth > 0);

this.clearConnectedTabClipping();
const activeTabFill = activeTab?.firstElementChild;
Expand Down
74 changes: 54 additions & 20 deletions src/vs/workbench/contrib/modernUI/browser/media/connectedEditorTabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
--modern-ui-editor-tab-action-hover-background: var(--modern-ui-editor-tab-hover-background);
--modern-ui-editor-tab-action-unfocused-hover-background: var(--modern-ui-editor-tab-unfocused-hover-background);
--modern-ui-connected-tab-action-background: var(--modern-ui-editor-tab-inactive-background);
--modern-ui-connected-tab-radius: var(--vscode-cornerRadius-small);
--modern-ui-connected-tab-radius: var(--vscode-cornerRadius-medium, var(--vscode-cornerRadius-small));
--modern-ui-connected-tab-cap-radius: calc(var(--modern-ui-connected-tab-radius) + var(--vscode-strokeThickness));
--modern-ui-connected-tab-shoulder-radius: var(--modern-ui-connected-tab-cap-radius);
--modern-ui-connected-tab-action-inset: calc((var(--editor-group-tab-height) - var(--vscode-spacing-size200)) / 2 + var(--vscode-spacing-size40));
Expand Down Expand Up @@ -132,6 +132,10 @@
padding-bottom: var(--vscode-strokeThickness);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs.two-tab-bars > .tabs-and-actions-container .tabs-container > .tab.connected-tab-upper-row {
border-block-width: 0;
}

/* Bottom rows occupy the strip directly so their edges cannot round apart from compensating pill gutters at fractional zoom. */
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab:not(.connected-tab-upper-row),
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .modern-ui-editor-tab {
Expand All @@ -154,10 +158,12 @@
z-index: 9;
}

/* Occlude scrolling connected fills beneath sticky tabs while preserving the final separator row. */
/* Occlude scrolling fills completely; this layer owns the separator beneath sticky tabs. */
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .sticky-tabs-background {
bottom: var(--vscode-strokeThickness);
bottom: 0;
height: auto;
border-bottom: var(--vscode-strokeThickness) solid var(--modern-ui-connected-tab-border);
box-sizing: border-box;
}

/* Keep the separator underneath the active fill without changing the tab,
Expand All @@ -167,15 +173,22 @@
background-color: var(--modern-ui-connected-tab-border);
}

/* Wrapped fills occupy their row's hit box, without an extra gutter below the final row. */
/* Wrapped scrolling does not add the pill-style bottom gutter. */
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping > .monaco-scrollable-element {
padding-bottom: 0;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping {
padding-top: var(--vscode-spacing-size20);
Comment thread
chryw marked this conversation as resolved.
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs.connected-tabs-wrapping {
overflow: visible;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container {
--modern-ui-connected-tab-action-inset: calc((var(--editor-group-tab-height) - var(--vscode-spacing-size200)) / 2 + var(--vscode-spacing-size20));
--modern-ui-tab-action-padding: calc(var(--vscode-spacing-size200) + 2 * var(--modern-ui-connected-tab-action-inset));
padding-bottom: 0;
row-gap: var(--vscode-spacing-size20);
}

Expand Down Expand Up @@ -229,6 +242,11 @@
box-shadow: calc(var(--modern-ui-connected-tab-shoulder-radius) / 2) calc(var(--modern-ui-connected-tab-shoulder-radius) / 2) 0 calc(var(--modern-ui-connected-tab-shoulder-radius) / 2) var(--modern-ui-connected-tab-current-background);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active > .tab-fill::before,
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active > .tab-fill::after {
border-bottom-color: transparent;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active:first-child > .tab-fill::before,
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.last-in-row + .tab.active > .tab-fill::before {
content: none;
Expand Down Expand Up @@ -257,7 +275,7 @@
position: absolute;
bottom: 0;
width: var(--vscode-strokeThickness);
height: calc(var(--modern-ui-connected-tab-shoulder-radius) - var(--vscode-strokeThickness) * 2);
height: calc(var(--modern-ui-connected-tab-shoulder-radius) - var(--vscode-strokeThickness));
box-sizing: border-box;
background: linear-gradient(to bottom, transparent var(--vscode-strokeThickness), var(--modern-ui-connected-tab-current-background) var(--vscode-strokeThickness));
}
Expand Down Expand Up @@ -317,6 +335,11 @@
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .modern-ui-editor-tab-strip .tab-connected-overflow-edge.connected-tab-left-clipped::before {
left: 0;
border-left: var(--vscode-strokeThickness) solid var(--modern-ui-connected-tab-border);
border-top-left-radius: var(--modern-ui-connected-tab-cap-radius);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tab-connected-overflow-edge.connected-tab-adjacent-sticky.connected-tab-left-clipped::before {
border-left: 0;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tab-connected-overflow-edge.connected-tab-right-clipped::after {
Expand Down Expand Up @@ -541,49 +564,60 @@
box-shadow: calc(var(--modern-ui-connected-tab-shoulder-radius) / -2) calc(var(--modern-ui-connected-tab-shoulder-radius) / 2) 0 calc(var(--modern-ui-connected-tab-shoulder-radius) / 2) var(--modern-ui-connected-tab-active-hover-background);
}

/* Rows above the document retain the original control-tier pills. */
/* Rows above the document retain separate rounded pills. */
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row {
--modern-ui-editor-tab-hover-background: var(--modern-ui-editor-tab-custom-hover-background, var(--modern-ui-connected-tab-upper-hover-background));
--modern-ui-editor-tab-unfocused-hover-background: var(--modern-ui-editor-tab-custom-unfocused-hover-background, var(--modern-ui-editor-tab-hover-background));
--modern-ui-editor-tab-action-hover-background: var(--modern-ui-editor-tab-hover-background);
--modern-ui-editor-tab-action-unfocused-hover-background: var(--modern-ui-editor-tab-unfocused-hover-background);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab.connected-tab-upper-row {
--modern-ui-connected-tab-action-inset: calc((var(--editor-group-tab-height) - var(--vscode-spacing-size200)) / 2);
--modern-ui-tab-action-padding: calc(var(--vscode-spacing-size200) + 2 * var(--modern-ui-connected-tab-action-inset) + var(--vscode-spacing-size20));
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row > .tab-fill {
inset: 0 var(--vscode-spacing-size20);
border-radius: var(--vscode-cornerRadius-small);
border-color: transparent;
border-radius: var(--modern-ui-connected-tab-radius);
border: var(--vscode-strokeThickness) solid transparent;
background-clip: padding-box;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab.connected-tab-upper-row > .tab-fill {
inset-block: calc(-1 * var(--vscode-spacing-size20));
inset-inline: 0;
inset-inline: var(--vscode-strokeThickness);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab:first-child.connected-tab-upper-row > .tab-fill {
left: var(--vscode-spacing-size20);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab.connected-tab-upper-row.last-in-row > .tab-fill {
right: var(--vscode-spacing-size20);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.active.connected-tab-top-row:not(.connected-tab-upper-row) > .tab-fill {
border-top-color: transparent;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab:first-child:not(.connected-tab-upper-row) > .tab-fill,
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.wrapping .tabs-container > .tab:first-child > .tab-fill,
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.last-in-row + .tab > .tab-fill {
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.last-in-row + .tab:not(.connected-tab-upper-row) > .tab-fill {
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
border-left-color: transparent;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab.connected-tab-upper-row:not(.sticky-compact):not(.tab-actions-left) > .tab-actions {
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab:first-child:not(.connected-tab-upper-row) > .tab-fill {
left: 0;
border-top-left-radius: var(--vscode-cornerRadius-large);
border-bottom-left-radius: 0;
border-left-width: 0;
border-left-color: transparent;
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row:not(.sticky-compact):not(.tab-actions-left) > .tab-actions {
right: var(--modern-ui-connected-tab-action-inset);
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab.connected-tab-upper-row:not(.sticky-compact).tab-actions-left > .tab-actions {
.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row:not(.sticky-compact).tab-actions-left > .tab-actions {
left: var(--modern-ui-connected-tab-action-inset);
}

Expand All @@ -601,5 +635,5 @@
}

.modern-ui-tabs.modern-ui-connected-editor-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab.connected-tab-upper-row.active > .tab-actions {
border-radius: var(--vscode-cornerRadius-small);
border-radius: var(--modern-ui-connected-tab-radius);
}
1 change: 1 addition & 0 deletions src/vs/workbench/contrib/modernUI/browser/media/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
--tab-border-top-color: transparent !important;
}

.modern-ui-tabs.monaco-workbench:not(.file-icons-enabled) .part.editor > .content .editor-group-container > .title.tabs .tabs-container > .tab:not(.sticky-compact):not(.tab-actions-left),
.modern-ui-tabs .part.editor > .content .editor-group-container > .title.tabs:not(.show-file-icons) .tabs-container > .tab:not(.sticky-compact):not(.tab-actions-left) {
padding-left: var(--vscode-spacing-size80) !important;
}
Expand Down
Loading
Loading