Editor: Refine connected tabs UI

[Cherry Wang (chryw)]

Connected editor tabs and the editor surface should read as one document well. Today the seam between them breaks down: wrapped rows leave gutters, selection shifts tab geometry, the strip repaints the whole theme's tab palette, and close targets move as a tab is selected, hovered, or focused. This PR refines that boundary so the tab strip, editor frame, and close affordances stay visually and physically stable.

Classic tabs, the pill tab style, and the Agents window are unchanged.

Refs #336320. Consolidates the close-spacing work from #336791.

Changes

Theming — the strip no longer repaints the whole palette

• Adds editorGroupHeader.connectedTabsBackground (defaults to editorGroupHeader.tabsBackground), so connected strips get their own restrained neutral fill without rewriting each theme's global editorGroupHeader.tabsBackground and tab.inactiveBackground. Classic tabs keep their original colors.
• The outside stroke, shoulders, and strip separator now use editorGroupHeader.tabsBorder (falling back to tab.border) instead of editor.background, so the seam is a real border rather than a coincidence of matching fills.
• Inactive labels use tab.inactiveForeground instead of dimming foreground to 50%, keeping at least 4.5:1 contrast, including in inactive editor groups.

Frame — one continuous boundary instead of stacked edges

• First tabs and wrapped-row starts drop their own left stroke and outside shoulder; the editor frame paints that edge once.
• An active tab on the outermost row reuses the editor frame's top stroke rather than drawing a second line beside it.
• In high-contrast themes, a single rounded editor-group frame encloses the title and editor surface on all four sides, including breadcrumbs.
• Free corners stay rounded; only corners adjoining the frame are squared.

Layout — geometry stops depending on selection

• Wrapped rows lose their horizontal gutters, so painted row surfaces meet edge to edge; spacing remains only between rows.
• Selecting a tab no longer changes its width or margin, and row classification no longer triggers a second fit-tab reflow.
• Shoulder space is reserved only after the final tab; intermediate shoulders paint over adjacent surfaces instead of inserting a gap.

Close targets — stable across every state

• Close-action clearance is derived from tab height and row gutters rather than the shoulder radius, and is reserved on inactive tabs too, so selecting a tab never moves its close target.
• The 20px hover target keeps even inset spacing on all sides and stays clear of the terminal shoulder in wrapped rows, single rows, and separate pinned rows.
• High-contrast hover and focus indicators belong to the close target itself, not to a second border around its container. Disabled Close Others (Alt) no longer shifts the target.

Structure

• The connected root marker now lives with the editor control constants and is shared by editor layout, the Modern UI contribution, and theming.
• connectedEditorTabs.css owns marker-gated geometry; connectedEditorTabs.ts owns marker-gated theme derivations. Core editor-tab code keeps only what CSS cannot express: row classification, label compression, shoulder-aware reveal, and viewport clipping.

How to test

1. Run Code OSS and set "workbench.experimental.modernUI": true (modernUIEditorTabStyle defaults to connected).
2. Open about eight editors and narrow the window until tabs wrap onto two rows. Confirm rows meet without horizontal gutters and no gutter appears below the last row.
3. Select tabs on both rows. The selected tab must not change width or shift its neighbours, and its close button must not move.
4. Hover a clean inactive tab, then Tab into its close action. The hover or focus indicator should sit on the close target with even inset spacing.
5. Hold Alt to turn the close action into a disabled Close Others action; the target must stay in place.
6. Switch to Dark High Contrast and Light High Contrast. The editor group should have one continuous rounded frame, with tabs sharing its strokes rather than doubling them.
7. Turn Modern UI off and confirm Classic tabs are visually unchanged.

Screenshots

The automated screenshot report is the primary visual evidence for this PR. It compares the base and current implementations across all bundled themes and fixture states.

When reviewing the report, focus on:

• connected versus Classic tab colors, especially inactive labels and editor-group backgrounds;
• single-row, wrapped-row, and separate pinned-row geometry;
• shared frame edges, shoulders, and corner treatment in default and high-contrast themes;
• close-action position and indicators across inactive, selected, hover, focus, and disabled states.

Validation

• Targeted unit tests cover row geometry, viewport clipping, connected-theme derivation, and high-contrast frame behavior.
• Component fixtures cover default and compact density, single and wrapped rows, separate pinned rows, action placement, and bundled themes.
• A Playwright fixture test asserts that close-target position remains stable across selection, hover, and focus.
• Client compilation, ESLint, Stylelint, and hygiene checks pass.

[Copilot]

Copilot review overview

🟢 Approval recommended

The scoped CSS changes match the stated geometry model and are covered by targeted regression tests.

Review effort: Balanced
Findings: None

What changed in this PR

Stabilizes connected-tab geometry across fractional zoom levels by removing compensating pill gutters from document-connected rows.

Changes:

• Makes lower rows directly occupy the tab strip.
• Preserves pill geometry for upper wrapped and pinned rows.
• Updates geometry regression coverage.

File	Description
connectedEditorTabs.css	Revises connected-row geometry.
modernUI.contribution.test.ts	Adds CSS geometry coverage.
multiEditorTabsControl.test.ts	Updates layout expectations.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Screenshot Changes

Base: b2a29a84 Current: 290632c1

The screenshot report exceeds GitHub's comment size limit. View the full report in the workflow summary.

[Copilot]

Copilot review overview

🟡 Changes recommended

The new high-contrast hover rule incorrectly gives disabled tab actions an actionable outline.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 1

Open (1)

• Disabled tab action shows misleading high-contrast hover outline · New

[Copilot]

Copilot review overview

🔵 Needs a closer look

Broad visual geometry changes still have acknowledged native zoom, pane-seam, and Agents isolation validation gaps.

Review effort: Balanced
Findings: None

Resolved since last review (1)

• Disabled tab action shows misleading high-contrast hover outline

[vs-code-engineering]

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

Benjamin Christopher Simmonds (@benibenj)

Matched files:

• src/vs/workbench/browser/parts/editor/editor.ts
• src/vs/workbench/browser/parts/editor/editorTabsControl.ts
• src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts

[Copilot]

Copilot review overview

🔵 Needs a closer look

The broad visual and theme-sensitive changes still have acknowledged native zoom, pane-seam, and Agents-window validation gaps.

Review effort: Balanced
Findings: None

[Cherry Wang (chryw)]

also fixes #337480 by using a dedicated token for connected tab strip background so the style doesn't leak into legacy style.