Modern UI: Enhance tab design for improved accessibility and usability by mrleemurray · Pull Request #329145 · microsoft/vscode

mrleemurray · 2026-08-05T10:01:52Z

This pull request introduces significant improvements to the visual appearance and structure of editor tabs, focusing on the Modern UI style. The changes add a new .tab-fill element for pill-shaped backgrounds, refine tab padding and spacing, and update how tab backgrounds and hit areas are rendered. There are also several adjustments to spacing and layout to ensure consistency, accessibility, and better alignment with the Modern UI design guidelines.

Modern UI Tab Rendering Enhancements:

Added a new .tab-fill element to each tab in MultiEditorTabsControl for rendering pill-shaped backgrounds, which allows for more flexible and visually consistent styling. [1] [2]
Updated CSS to display .tab-fill as the pill background in Modern UI, with different background colors for hover, selected, and active states, and ensured it does not interfere with tab content or hit areas.

Tab Spacing and Layout Adjustments:

Refined tab and container padding, using CSS variables for consistency and improved accessibility, including special handling for high-contrast themes. [1] [2] [3] [4]
Adjusted the minimum height and border of tabs to expand the clickable area without affecting the label or indicator layout, especially in non-high-contrast Modern UI.

Cleanup and Removal of Redundant Styles:

Removed old background color rules and redundant styles for compact sticky tabs, as these are now handled by the new .tab-fill approach. [1] [2] [3]

These changes collectively modernize the tab appearance, improve accessibility, and lay the groundwork for further UI enhancements.

Resolves #325256
Resolves #328765

…kable area Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

…ab-size

…pping tabs Co-authored-by: Copilot <copilot@github.com>

…ility Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

…stency Co-authored-by: Copilot <copilot@github.com>

…t themes Co-authored-by: Copilot <copilot@github.com>

…padding for better layout

vs-code-engineering · 2026-08-05T10:03:39Z

📬 CODENOTIFY

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

@benibenj

Matched files:

src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts

Copilot

Pull request overview

Introduces pill-style Modern UI editor tabs with larger hit areas and updated state styling.

Changes:

Adds a decorative tab-fill element.
Updates tab spacing, sizing, and state backgrounds.
Preserves default styling outside Modern UI.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
`tabs.css`	Implements Modern UI pill styling and hit areas.
`multiEditorTabsControl.ts`	Adds the decorative tab-fill element.
`multieditortabscontrol.css`	Hides tab fills outside Modern UI.

github-actions · 2026-08-05T10:09:39Z

Screenshot Changes

Base: 8662518b Current: 0e8c3411

Changed (81)

sessions/editorHeader/editorHeader/BreadcrumbsAndAction/Dark

Before	After

sessions/editorHeader/editorHeader/BreadcrumbsAndAction/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/Default/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/Default/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/Default/DarkHighContrast

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowAllPinned/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowAllPinned/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowAllUnpinned/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowAllUnpinned/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowMixed/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowMixed/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabsOnSeparateRowMixed/DarkHighContrast

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/BreadcrumbsFilePathLast/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/BreadcrumbsFilePathLast/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/BreadcrumbsIconsOff/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/BreadcrumbsIconsOff/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabSizingShrink/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabSizingShrink/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabSizingFixed/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabSizingFixed/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabHeightCompact/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabHeightCompact/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/WrapTabs/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/WrapTabs/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabActionLocationLeft/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabActionLocationLeft/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabActionCloseHidden/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabActionCloseHidden/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabActionUnpinHidden/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TabActionUnpinHidden/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/ShowTabIndex/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/ShowTabIndex/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/HighlightModifiedTabs/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/HighlightModifiedTabs/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LabelFormatShort/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LabelFormatShort/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LabelFormatMedium/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LabelFormatMedium/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LabelFormatLong/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LabelFormatLong/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/ShowIconsOff/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/ShowIconsOff/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/DecorationsOff/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/DecorationsOff/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabSizingCompact/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabSizingCompact/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabSizingShrink/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedTabSizingShrink/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TitleScrollbarLarge/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TitleScrollbarLarge/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TitleScrollbarVisible/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/TitleScrollbarVisible/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/EditorActionsDefault/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/EditorActionsDefault/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/EditorActionsTitleBar/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/EditorActionsTitleBar/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/EditorActionsHidden/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/EditorActionsHidden/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/AlwaysShowEditorActionsActiveGroup/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/AlwaysShowEditorActionsActiveGroup/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/AlwaysShowEditorActionsInactiveGroup/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/AlwaysShowEditorActionsInactiveGroup/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/ActiveGroup/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/ActiveGroup/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/InactiveGroup/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/InactiveGroup/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/InactiveGroup/DarkHighContrast

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/MultiSelect/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/MultiSelect/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/MultiSelect/DarkHighContrast

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/InactiveGroupDirty/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/InactiveGroupDirty/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LongLabelsShrink/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/LongLabelsShrink/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/DropTargetBetweenTabs/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/DropTargetBetweenTabs/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/DropTargetBetweenTabs/DarkHighContrast

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/StickyCompactNoIcons/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/StickyCompactNoIcons/Light

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedSeparateRowCompact/Dark

Before	After

editor/editorTabBar/editorTabBar/ModernUIOn/PinnedSeparateRowCompact/Light

Before	After

…th calculations Co-authored-by: Copilot <copilot@github.com>

… bars Co-authored-by: Copilot <copilot@github.com>

…container Co-authored-by: Copilot <copilot@github.com>

…o-tab-bars layout Co-authored-by: Copilot <copilot@github.com>

…ontrast themes Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

…stency Co-authored-by: Copilot <copilot@github.com>

…acing Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

…nding with UI elements Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

…al spacing Co-authored-by: Copilot <copilot@github.com>

mrleemurray and others added 9 commits August 4, 2026 17:52

Enhance Modern UI tab design with pill background and adjustable clic…

1f32dfe

…kable area Co-authored-by: Copilot <copilot@github.com>

style: update tab padding and borders for improved layout consistency

9bff47a

Co-authored-by: Copilot <copilot@github.com>

Merge remote-tracking branch 'origin/main' into mrleemurray/maximis-t…

bc0e716

…ab-size

style: adjust tab spacing and height for improved clickability in wra…

6959c78

…pping tabs Co-authored-by: Copilot <copilot@github.com>

style: simplify tab fill styling and enhance hit area for better usab…

d79ba7f

…ility Co-authored-by: Copilot <copilot@github.com>

style: adjust z-index for tab labels to improve layering and interaction

71ae5a0

Co-authored-by: Copilot <copilot@github.com>

style: adjust sticky tabs background height for improved layout consi…

294cc62

…stency Co-authored-by: Copilot <copilot@github.com>

style: add top padding for tabs-and-actions-container in high contras…

44c2cd2

…t themes Co-authored-by: Copilot <copilot@github.com>

style: update tab fill container to improve accessibility and adjust …

2d3ce8e

…padding for better layout

Copilot AI balanced review requested due to automatic review settings August 5, 2026 10:01

mrleemurray enabled auto-merge (squash) August 5, 2026 10:01

mrleemurray self-assigned this Aug 5, 2026

Copilot started reviewing on behalf of mrleemurray August 5, 2026 10:02 View session

Copilot AI reviewed Aug 5, 2026

View reviewed changes

Comment thread src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css Outdated

Comment thread src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css

Comment thread src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css Outdated

style: remove unused pinned tab spacing variable and simplify tab wid…

0d211dc

…th calculations Co-authored-by: Copilot <copilot@github.com>

mrleemurray marked this pull request as draft August 5, 2026 10:23

auto-merge was automatically disabled August 5, 2026 10:23
Pull request was converted to draft

mrleemurray and others added 11 commits August 5, 2026 11:38

style: adjust margin for tabs-and-actions-container with multiple tab…

63cf644

… bars Co-authored-by: Copilot <copilot@github.com>

style: remove margin adjustment for two-tab-bars in tabs-and-actions-…

84f8ba7

…container Co-authored-by: Copilot <copilot@github.com>

style: adjust margin and padding for tabs-and-actions-container in tw…

73577d5

…o-tab-bars layout Co-authored-by: Copilot <copilot@github.com>

style: hide tab border for selected and multi-selected tabs in high c…

d272104

…ontrast themes Co-authored-by: Copilot <copilot@github.com>

style: refine tab spacing and hover effects for improved UI consistency

6638f58

Co-authored-by: Copilot <copilot@github.com>

style: update tab background colors for improved visibility and consi…

20618a4

…stency Co-authored-by: Copilot <copilot@github.com>

style: adjust tab border widths for two-tab-bars layout to improve sp…

21cec6e

…acing Co-authored-by: Copilot <copilot@github.com>

style: adjust padding for two-tab-bars layout to improve spacing

8b2cdab

Co-authored-by: Copilot <copilot@github.com>

style: update tab background colors for translucency and improved ble…

0ecb507

…nding with UI elements Co-authored-by: Copilot <copilot@github.com>

style: refine tab fill styles for improved blending and hover effects

10832e6

Co-authored-by: Copilot <copilot@github.com>

style: suppress tab outline to avoid double border effect

ffcd0cd

Co-authored-by: Copilot <copilot@github.com>

style: adjust top padding for two-tab-bars layout to prevent addition…

3385d9a

…al spacing Co-authored-by: Copilot <copilot@github.com>

mrleemurray marked this pull request as ready for review August 5, 2026 12:19

DonJayamanne previously approved these changes Aug 5, 2026

View reviewed changes

Merge branch 'main' into mrleemurray/maximis-tab-size

2c0fbbf

mrleemurray dismissed DonJayamanne’s stale review via 2c0fbbf August 5, 2026 15:42

dmitrivMS approved these changes Aug 5, 2026

View reviewed changes

jo-oikawa approved these changes Aug 5, 2026

View reviewed changes

mrleemurray merged commit 758196a into main Aug 5, 2026
29 checks passed

mrleemurray deleted the mrleemurray/maximis-tab-size branch August 5, 2026 17:13

vs-code-engineering Bot added this to the 1.133.0 milestone Aug 5, 2026

Navigation Menu

Uh oh!

Modern UI: Enhance tab design for improved accessibility and usability - #329145

Modern UI: Enhance tab design for improved accessibility and usability#329145
mrleemurray merged 23 commits into
mainfrom
mrleemurray/maximis-tab-size

mrleemurray commented Aug 5, 2026 •

edited

Loading

Uh oh!

vs-code-engineering Bot commented Aug 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Aug 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

mrleemurray commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vs-code-engineering Bot commented Aug 5, 2026

📬 CODENOTIFY

@benibenj

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot Changes

Changed (81)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mrleemurray commented Aug 5, 2026 •

edited

Loading

github-actions Bot commented Aug 5, 2026 •

edited

Loading