Skip to content

Modern UI: Fix redundant tab action fading in connected editor tabs - #336871

Merged
Dmitriy Vasyura (dmitrivMS) merged 2 commits into
microsoft:mainfrom
na2co3-ftw:fix/modern-ui-connected-tab-fading
Sep 28, 2026
Merged

Dmitriy Vasyura (dmitrivMS) merged 2 commits into
microsoft:mainfrom
na2co3-ftw:fix/modern-ui-connected-tab-fading

Conversation

@na2co3-ftw

@na2co3-ftw na2co3 (na2co3-ftw) commented Sep 19, 2026 •

Copy link
Copy Markdown
Contributor

Problem

In Modern UI with connected tabs, workbench.editor.tabActionReserveSpace does not affect the actual reservation of tab action space, but it does affect the tab action fade behavior.

As a result, hovered, unmodified, and unpinned editor tabs can still show a faded filename even when the filename is not overlapped by the tab action button.

workbench.editor.tabActionReserveSpace: true:
スクリーンショット 2026-09-19 104840

workbench.editor.tabActionReserveSpace: false:
スクリーンショット 2026-09-19 104856

Fix

This change aligns the tab action fade rules with the actual tab action reservation rules in tabs.css. Connected tabs are now treated the same as tabs that reserve action space when deciding whether the label should fade.

It also removes a redundant CSS rule in the connected editor tabs stylesheet. That rule was no longer effective because it was overridden by a more specific selector in the main tabs stylesheet.

Copilot AI balanced review requested due to automatic review settings September 19, 2026 02:37

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟢 Approval recommended

The focused CSS correction matches existing reservation behavior and includes suitable regression coverage.

Review effort: Balanced
Findings: None

What changed in this PR

Aligns Modern UI connected-tab fading with reserved action spacing, preventing unnecessary filename fades.

Changes:

  • Excludes connected tabs from action fade masks.
  • Removes a redundant connected-tab override.
  • Adds regression coverage.
File Description
modernUI.contribution.test.ts Tests connected-tab fade behavior.
tabs.css Skips fades when connected tabs reserve space.
connectedEditorTabs.css Removes ineffective duplicate rule.

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

@na2co3-ftw

Copy link
Copy Markdown
Contributor Author

The fade on active tabs was made transparent in #337126, so it no longer has a visible effect for active tabs.
However, the transparent ::before pseudo-element is still present, and the fade is still visible on hovered inactive tabs.

This change completely hides the fade's ::before pseudo-element under the conditions aligned to the tab action reservation rules in tabs.css.

workbench.editor.tabActionReserveSpace: true Before:
スクリーンショット 2026-09-26 221516

workbench.editor.tabActionReserveSpace: true After:
スクリーンショット 2026-09-26 221453

@dmitrivMS
Dmitriy Vasyura (dmitrivMS) merged commit 3b1b27c into microsoft:main Sep 28, 2026
35 checks passed
@vs-code-engineering vs-code-engineering Bot added this to the 1.141.0 milestone Sep 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants