Modern UI: panel and secondary side bar tabs have no hover background, side bar tabs do

[niccolomineo]

• VS Code Version: 1.130.0 (1b6a188)
• OS Version: Darwin arm64 27.0.0 (macOS 26.0)
• Does this issue occur when all extensions are disabled?: Yes — the rules involved are core workbench CSS

Steps to Reproduce

1. Enable workbench.experimental.modernUI.
2. Set "workbench.activityBar.location": "top" so the side bar and secondary side bar render their composite bars as icon tabs.
3. Hover a tab in the primary side bar (Explorer / Search / Source Control) — a rounded hover pill appears behind the icon.
4. Hover a tab in the panel (Problems / Output / Terminal), or in the secondary side bar — nothing is painted.

Expected

All three composite bars give the same hover feedback.

Actual

Only the primary side bar does.

Cause

In Modern UI the hover pill is painted on the .active-item-indicator child element, in styleOverrides/browser/media/activityBar.css:

.style-override .pane-composite-part > .title > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked):hover .active-item-indicator,
.style-override .pane-composite-part > .header-or-footer > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked):hover .active-item-indicator {
	background-color: var(--vscode-list-hoverBackground);
}

For the panel and the secondary side bar, though, that element is hidden — same file:

.style-override.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator,
.style-override.monaco-workbench .pane-composite-part.basepanel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator {
	display: none;
}

It is hidden because for those two parts the active pill was moved onto .action-item itself, in styleOverrides/browser/media/tabs.css:

.style-override .part.panel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked {
	background-color: color-mix(in srgb, var(--vscode-foreground) 10%, transparent) !important;
}

(plus the two equivalent rules for .part.auxiliarybar > .title and > .header-or-footer.)

The checked pill was moved, the :hover pill was not. tabs.css has no :hover rule for these action items, and the one in activityBar.css now targets a hidden element — so hovering these tabs paints nothing. The primary side bar keeps its indicator visible and therefore still shows the hover pill.

Suggested fix

Add the matching hover rule in tabs.css for the parts whose indicator is hidden — .part.panel > .title and .part.auxiliarybar > .title | .header-or-footer — on .action-item:not(.checked):hover, using var(--vscode-list-hoverBackground) so it stays themable and consistent with the side bar.

Related

#327267 — same area: the active pill for these tabs is hardcoded and not themable.