Fix overlapping issues when multiple compact tabs are pinned

[hawkticehurst]

Fixes #325136

Changes:

• Added a solid pinned-tab background so scrolling tabs no longer show through / overlap with unpinned tabs
• Reduced compact pinned tabs width to better fit their icons
• Optically centered pinned-tab icons by knudging them 1px to the left

Screen.Recording.2026-07-10.at.4.56.17.PM.mov

[Copilot]

Pull request overview

This PR fixes issue #325136, where non-pinned editor tabs overlap pinned tabs when the modern/experimental UI is enabled together with pinnedTabSizing: "compact" and pinnedTabsOnSeparateRow: false. The root cause is that the modern-UI style override adds a margin-right: 4px pill spacing to every tab, but the layout math that reserves horizontal space for sticky tabs (and positions them via left) only used the raw compact tab width, underestimating the real slot width and causing overlap.

Changes:

• Extracts the duplicated sticky-tab-width switch into a single getStickyTabWidth() helper, used by both the per-tab left positioning and the stickyTabsWidth layout computation.
• Adds STYLE_OVERRIDE_COMPACT_PINNED_TAB_SPACING (4px) to the compact width when the tabs live inside a .style-override container, so the reserved width matches the actual pill + margin footprint.
• Adds CSS to pin sticky-compact tabs to a fixed 38px width (re-asserting it over the modern-UI sizing-fit rule) and to strip inner icon/label spacing.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts	Refactors sticky-tab width into getStickyTabWidth() and adds modern-UI spacing to the compact branch.
src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css	Adds sticky-compact fixed-width and inner-spacing overrides so compact pinned tabs render as consistent pills.

One concern worth addressing: in modern-UI mode the same 4px tab margin also applies to sticky-shrink tabs, but getStickyTabWidth('shrink') does not add the spacing, so pinnedTabSizing: "shrink" can still reproduce the overlap this PR fixes for compact.

[vs-code-engineering]

📬 CODENOTIFY

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

@benibenj

Matched files:

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

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.