Command center: dim Agents pill when inactive; soften quick input tabs - #331026
Conversation
Addresses two design-consistency complaints from microsoft#331016: - The Agents window's command-center pill never dimmed when the window lost focus, unlike the classic workbench pill. Add the missing inactive-state rule, guarded with :not(:hover):not(.agent- sessions-titlebar-approved) so it doesn't fight the existing hover and approved-state rules on specificity. (The pill's transparent-at-rest background was intentionally left alone: styleOverrides/commandCenter.css documents it as the reference the classic workbench pill is already being migrated toward under workbench.experimental.modernUI, so making it solid here would go the wrong direction.) - The experimental "Agent quick input" tab bar (Sessions/Commands/ Files) read as too heavy next to the plain single-column Command Palette. Tighten its padding/gap and switch the active tab from a solid quickInputList-focus fill to a subtle focusBorder tint.
There was a problem hiding this comment.
Pull request overview
Dims the Agents command-center pill in inactive windows and softens experimental quick-input tabs.
Changes:
- Adds inactive title-bar styling.
- Reduces tab spacing and visual emphasis.
- Replaces the active tab’s solid fill with a subtle tint.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
unifiedQuickAccess.css |
Refines tab spacing, weight, and active styling. |
sessionsTitleBarWidget.css |
Adds inactive command-center colors. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| padding: 4px 8px; | ||
| font-size: 12px; | ||
| font-weight: 500; | ||
| font-weight: 400; |
| border-color: var(--vscode-commandCenter-activeBorder); | ||
| } | ||
|
|
||
| .monaco-workbench .part.titlebar.inactive .command-center .agent-sessions-titlebar-container:not(:hover):not(.agent-sessions-titlebar-approved) { |
4a5899a to
3acfaed
Compare
|
srikanthananthula (@srikanthananthula63053) please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
Addresses part of #331016.
What
lost focus, unlike the classic workbench command-center pill. Adds
the missing inactive-state rule.
read as heavier than the plain single-column Command Palette next to
it. Tightens its padding/gap and swaps the active tab's solid
quickInputList-focus*fill for a subtlefocusBordertint.What this intentionally does NOT change
The two pills' at-rest background (solid vs. transparent) was left
alone.
styleOverrides/commandCenter.cssdocuments the Agents pill'stransparent-at-rest look as the reference the classic pill is already
being migrated toward under
workbench.experimental.modernUI— matchingthem by making the Agents pill solid would go the wrong direction and
stale that doc comment.
Known, disclosed inconsistency:
runScriptAction.css's radio-tab.activestate still uses the solidquickInputList-focus*fill thisPR moves away from in
unifiedQuickAccess.css. No documented contractties the two together (verified against the base
Radiocomponent'sown defaults, which neither file uses), but flagging for reviewer
awareness in case a follow-up should unify them.
Test plan
npm run stylelinton both files: 0 errors (15 pre-existing/advisorydesign-token suggestions on untouched or convention-matched lines).
npm run typecheck-client: no new errors (2 pre-existing errors inunrelated
agentHosttest files, confirmed present on bareorigin/mainbefore this change).getComputedStylethat all changed properties resolve to theintended values, and that Sessions/Commands tab-switching still
functions correctly after the styling change.