From 9a1e226c629746206d0a0110664ebbdf09aa2e67 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 14:31:46 +0100 Subject: [PATCH 01/11] Enhance CI Status Widget: Add collapse/expand functionality and update styles Co-authored-by: Copilot --- .../contrib/changes/browser/changesView.ts | 23 ++++++++- .../contrib/changes/browser/ciStatusWidget.ts | 48 ++++++++++++++++++- .../changes/browser/media/ciStatusWidget.css | 27 +++++++++-- 3 files changed, 89 insertions(+), 9 deletions(-) diff --git a/src/vs/sessions/contrib/changes/browser/changesView.ts b/src/vs/sessions/contrib/changes/browser/changesView.ts index 5d1466878e2..985b8a445db 100644 --- a/src/vs/sessions/contrib/changes/browser/changesView.ts +++ b/src/vs/sessions/contrib/changes/browser/changesView.ts @@ -644,8 +644,8 @@ export class ChangesViewPane extends ViewPane { const ciWidget = this.ciStatusWidget; const ciPane: IView = { element: ciElement, - minimumSize: ciMinHeight, - maximumSize: Number.POSITIVE_INFINITY, + get minimumSize() { return ciWidget.collapsed ? CIStatusWidget.HEADER_HEIGHT : ciMinHeight; }, + get maximumSize() { return ciWidget.collapsed ? CIStatusWidget.HEADER_HEIGHT : Number.POSITIVE_INFINITY; }, onDidChange: Event.map(this.ciStatusWidget.onDidChangeHeight, () => undefined), layout: (height) => { ciElement.style.height = `${height}px`; @@ -668,6 +668,25 @@ export class ChangesViewPane extends ViewPane { // Initially hide CI pane until checks arrive this.splitView.setViewVisible(1, false); + let savedCIPaneHeight = CIStatusWidget.HEADER_HEIGHT + CIStatusWidget.PREFERRED_BODY_HEIGHT; + this._register(this.ciStatusWidget.onDidToggleCollapsed(collapsed => { + if (!this.splitView || !this.ciStatusWidget) { + return; + } + if (collapsed) { + // Save current size before collapsing + const currentSize = this.splitView.getViewSize(1); + if (currentSize > CIStatusWidget.HEADER_HEIGHT) { + savedCIPaneHeight = currentSize; + } + this.splitView.resizeView(1, CIStatusWidget.HEADER_HEIGHT); + } else { + // Restore saved size on expand + this.splitView.resizeView(1, savedCIPaneHeight); + } + this.layoutSplitView(); + })); + this._register(this.ciStatusWidget.onDidChangeHeight(() => { if (!this.splitView || !this.ciStatusWidget) { return; diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index f83c243b5b2..4d21fa58b24 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -168,9 +168,14 @@ export class CIStatusWidget extends Disposable { private readonly _onDidChangeHeight = this._register(new Emitter()); readonly onDidChangeHeight = this._onDidChangeHeight.event; + private readonly _onDidToggleCollapsed = this._register(new Emitter()); + readonly onDidToggleCollapsed = this._onDidToggleCollapsed.event; + private _checkCount = 0; + private _collapsed = false; private _model: GitHubPullRequestCIModel | undefined; private _sessionResource: URI | undefined; + private readonly _chevronNode: HTMLElement; get element(): HTMLElement { return this._domNode; @@ -181,6 +186,9 @@ export class CIStatusWidget extends Disposable { if (this._checkCount === 0) { return 0; } + if (this._collapsed) { + return CIStatusWidget.HEADER_HEIGHT; + } return CIStatusWidget.HEADER_HEIGHT + this._checkCount * CICheckListDelegate.ITEM_HEIGHT; } @@ -189,6 +197,11 @@ export class CIStatusWidget extends Disposable { return this._checkCount > 0; } + /** Whether the body is collapsed (header-only). */ + get collapsed(): boolean { + return this._collapsed; + } + constructor( container: HTMLElement, @IOpenerService private readonly _openerService: IOpenerService, @@ -201,18 +214,28 @@ export class CIStatusWidget extends Disposable { this._domNode = dom.append(container, $('.ci-status-widget')); this._domNode.style.display = 'none'; - // Header (always visible) + // Header (always visible, click to collapse/expand) this._headerNode = dom.append(this._domNode, $('.ci-status-widget-header')); this._titleNode = dom.append(this._headerNode, $('.ci-status-widget-title')); this._titleLabelNode = dom.append(this._titleNode, $('.ci-status-widget-title-label')); this._titleLabelNode.textContent = localize('ci.checksLabel', "PR Checks"); - this._countsNode = dom.append(this._titleNode, $('.ci-status-widget-counts')); + this._countsNode = dom.append(this._headerNode, $('.ci-status-widget-counts')); this._headerActionBarContainer = dom.append(this._headerNode, $('.ci-status-widget-header-actions')); this._headerActionBar = this._register(new ActionBar(this._headerActionBarContainer)); this._register(dom.addDisposableListener(this._headerActionBarContainer, dom.EventType.CLICK, e => { e.preventDefault(); e.stopPropagation(); })); + this._chevronNode = dom.append(this._headerNode, $('.group-chevron')); + this._chevronNode.classList.add(...ThemeIcon.asClassNameArray(Codicon.chevronDown)); + + this._register(dom.addDisposableListener(this._headerNode, dom.EventType.CLICK, e => { + // Don't toggle when clicking the action bar + if (dom.isAncestor(e.target as HTMLElement, this._headerActionBarContainer)) { + return; + } + this._toggleCollapsed(); + })); // Body (list of checks) this._bodyNode = dom.append(this._domNode, $('.ci-status-widget-body')); @@ -344,9 +367,30 @@ export class CIStatusWidget extends Disposable { * Called by the parent view after computing available space. */ layout(height: number): void { + if (this._collapsed) { + this._bodyNode.style.display = 'none'; + return; + } + this._bodyNode.style.display = ''; this._list.layout(height); } + private _toggleCollapsed(): void { + this._collapsed = !this._collapsed; + this._updateChevron(); + this._onDidToggleCollapsed.fire(this._collapsed); + this._onDidChangeHeight.fire(); + } + + private _updateChevron(): void { + this._chevronNode.className = 'group-chevron'; + this._chevronNode.classList.add( + ...ThemeIcon.asClassNameArray( + this._collapsed ? Codicon.chevronRight : Codicon.chevronDown + ) + ); + } + private _renderBody(checks: readonly ICICheckListItem[]): void { this._list.splice(0, this._list.length, checks); } diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 199b1b933ed..6a635725289 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -19,9 +19,28 @@ display: flex; align-items: center; gap: 6px; - padding: 2px 0; + padding: 8px 0; min-height: 22px; font-weight: 500; + cursor: pointer; + user-select: none; +} + +/* Chevron — right-aligned, visible on hover only */ +.ci-status-widget-header .group-chevron { + flex-shrink: 0; + width: 16px; + height: 16px; + display: none; + align-items: center; + justify-content: center; + font-size: 12px; + opacity: 0.7; +} + +.ci-status-widget-header:hover .group-chevron, +.ci-status-widget-header:focus-within .group-chevron { + display: flex; } /* Title - single line, overflow ellipsis */ @@ -47,12 +66,11 @@ gap: 8px; flex-shrink: 0; margin-left: auto; - padding-right: 8px; } .ci-status-widget.has-fix-actions:hover .ci-status-widget-counts, .ci-status-widget.has-fix-actions:focus-within .ci-status-widget-counts { - visibility: hidden; + display: none; } .ci-status-widget-count-badge { @@ -84,8 +102,7 @@ } .ci-status-widget-header-actions { - position: absolute; - right: 0; + flex-shrink: 0; display: none; align-items: center; } From 2caf5f7a9c8d6aca4c675e36097ce9c0823218f0 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 14:48:52 +0100 Subject: [PATCH 02/11] Enhance CI Status Widget: Adjust header height, improve accessibility, and refine styles Co-authored-by: Copilot --- .../contrib/changes/browser/ciStatusWidget.ts | 23 ++++++++++++++++--- .../changes/browser/media/ciStatusWidget.css | 6 +++-- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index 4d21fa58b24..be63202797b 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -148,7 +148,7 @@ class CICheckListRenderer implements IListRenderer { // Don't toggle when clicking the action bar if (dom.isAncestor(e.target as HTMLElement, this._headerActionBarContainer)) { @@ -236,6 +240,12 @@ export class CIStatusWidget extends Disposable { } this._toggleCollapsed(); })); + this._register(dom.addDisposableListener(this._headerNode, dom.EventType.KEY_DOWN, e => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + this._toggleCollapsed(); + } + })); // Body (list of checks) this._bodyNode = dom.append(this._domNode, $('.ci-status-widget-body')); @@ -273,6 +283,7 @@ export class CIStatusWidget extends Disposable { this._model = model; if (!model) { this._checkCount = 0; + this._setCollapsed(false); this._renderBody([]); this._renderHeaderActions([]); this._domNode.style.display = 'none'; @@ -376,12 +387,18 @@ export class CIStatusWidget extends Disposable { } private _toggleCollapsed(): void { - this._collapsed = !this._collapsed; - this._updateChevron(); + this._setCollapsed(!this._collapsed); this._onDidToggleCollapsed.fire(this._collapsed); + // Also fires onDidChangeHeight so the SplitView pane updates its min/max constraints this._onDidChangeHeight.fire(); } + private _setCollapsed(collapsed: boolean): void { + this._collapsed = collapsed; + this._updateChevron(); + this._headerNode.setAttribute('aria-expanded', String(!collapsed)); + } + private _updateChevron(): void { this._chevronNode.className = 'group-chevron'; this._chevronNode.classList.add( diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 6a635725289..82a901b5556 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -19,7 +19,9 @@ display: flex; align-items: center; gap: 6px; - padding: 8px 0; + padding: 6px 2px; + margin-top: 2px; + border-radius: 8px; min-height: 22px; font-weight: 500; cursor: pointer; @@ -70,7 +72,7 @@ .ci-status-widget.has-fix-actions:hover .ci-status-widget-counts, .ci-status-widget.has-fix-actions:focus-within .ci-status-widget-counts { - display: none; + visibility: hidden; } .ci-status-widget-count-badge { From 0fbb436619901ae7f7839b94619043bc5792e490 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 14:52:42 +0100 Subject: [PATCH 03/11] Refactor CI Status Widget: Adjust header height, improve padding, and enhance hover/focus styles Co-authored-by: Copilot --- .../contrib/changes/browser/ciStatusWidget.ts | 5 +++-- .../contrib/changes/browser/media/ciStatusWidget.css | 11 ++++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index be63202797b..9df1328c488 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -148,7 +148,7 @@ class CICheckListRenderer implements IListRenderer { - if (e.key === 'Enter' || e.key === ' ') { + if ((e.key === 'Enter' || e.key === ' ') && e.target === this._headerNode) { e.preventDefault(); this._toggleCollapsed(); } @@ -295,6 +295,7 @@ export class CIStatusWidget extends Disposable { if (checks.length === 0) { this._checkCount = 0; + this._setCollapsed(false); this._renderBody([]); this._renderHeaderActions([]); this._domNode.style.display = 'none'; diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 82a901b5556..5055fc1bec3 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -19,7 +19,7 @@ display: flex; align-items: center; gap: 6px; - padding: 6px 2px; + padding: 6px 4px; margin-top: 2px; border-radius: 8px; min-height: 22px; @@ -28,6 +28,15 @@ user-select: none; } +.ci-status-widget-header:hover { + background-color: var(--vscode-list-hoverBackground); +} + +.ci-status-widget-header:focus-visible { + outline: 1px solid var(--vscode-focusBorder); + outline-offset: -1px; +} + /* Chevron — right-aligned, visible on hover only */ .ci-status-widget-header .group-chevron { flex-shrink: 0; From a29a7d7c22c55f80b41332472979fd7c84c7152a Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 14:55:09 +0100 Subject: [PATCH 04/11] Enhance CI Status Widget: Add aria-label for accessibility and remove unnecessary CSS property Co-authored-by: Copilot --- src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts | 1 + src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index 9df1328c488..7b48061766e 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -230,6 +230,7 @@ export class CIStatusWidget extends Disposable { this._chevronNode.classList.add(...ThemeIcon.asClassNameArray(Codicon.chevronDown)); this._headerNode.setAttribute('role', 'button'); + this._headerNode.setAttribute('aria-label', localize('ci.toggleChecks', "Toggle PR Checks")); this._headerNode.setAttribute('aria-expanded', 'true'); this._headerNode.tabIndex = 0; diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 5055fc1bec3..8f0ff52954c 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -15,7 +15,6 @@ /* Header */ .ci-status-widget-header { - position: relative; display: flex; align-items: center; gap: 6px; From 5f8a45960084dd8f886f323f2a1ec3381e668416 Mon Sep 17 00:00:00 2001 From: Lee Murray Date: Tue, 31 Mar 2026 15:02:10 +0100 Subject: [PATCH 05/11] Update src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index 7b48061766e..1333e5367fd 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -148,7 +148,7 @@ class CICheckListRenderer implements IListRenderer Date: Tue, 31 Mar 2026 15:15:29 +0100 Subject: [PATCH 06/11] address pr ccr feedback Co-authored-by: Copilot --- .../contrib/changes/browser/ciStatusWidget.ts | 7 +++++-- .../changes/browser/media/ciStatusWidget.css | 16 ++++++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index 1333e5367fd..606107329c4 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -219,7 +219,7 @@ export class CIStatusWidget extends Disposable { this._titleNode = dom.append(this._headerNode, $('.ci-status-widget-title')); this._titleLabelNode = dom.append(this._titleNode, $('.ci-status-widget-title-label')); this._titleLabelNode.textContent = localize('ci.checksLabel', "PR Checks"); - this._countsNode = dom.append(this._headerNode, $('.ci-status-widget-counts')); + this._countsNode = dom.append(this._titleNode, $('.ci-status-widget-counts')); this._headerActionBarContainer = dom.append(this._headerNode, $('.ci-status-widget-header-actions')); this._headerActionBar = this._register(new ActionBar(this._headerActionBarContainer)); this._register(dom.addDisposableListener(this._headerActionBarContainer, dom.EventType.CLICK, e => { @@ -249,7 +249,10 @@ export class CIStatusWidget extends Disposable { })); // Body (list of checks) - this._bodyNode = dom.append(this._domNode, $('.ci-status-widget-body')); + const bodyId = 'ci-status-widget-body'; + this._bodyNode = dom.append(this._domNode, $(`.${bodyId}`)); + this._bodyNode.id = bodyId; + this._headerNode.setAttribute('aria-controls', bodyId); const listContainer = $('.ci-status-widget-list'); this._list = this._register(this._instantiationService.createInstance( diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 8f0ff52954c..a54615206dd 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -15,6 +15,7 @@ /* Header */ .ci-status-widget-header { + position: relative; display: flex; align-items: center; gap: 6px; @@ -29,6 +30,7 @@ .ci-status-widget-header:hover { background-color: var(--vscode-list-hoverBackground); + padding-right: 22px; } .ci-status-widget-header:focus-visible { @@ -38,19 +40,24 @@ /* Chevron — right-aligned, visible on hover only */ .ci-status-widget-header .group-chevron { - flex-shrink: 0; + position: absolute; + right: 4px; + top: 50%; + transform: translateY(-50%); width: 16px; height: 16px; - display: none; + display: flex; align-items: center; justify-content: center; font-size: 12px; - opacity: 0.7; + visibility: hidden; + opacity: 0; } .ci-status-widget-header:hover .group-chevron, .ci-status-widget-header:focus-within .group-chevron { - display: flex; + visibility: visible; + opacity: 0.7; } /* Title - single line, overflow ellipsis */ @@ -76,6 +83,7 @@ gap: 8px; flex-shrink: 0; margin-left: auto; + padding-right: 8px; } .ci-status-widget.has-fix-actions:hover .ci-status-widget-counts, From fc209bb84808a34edcb7bee568d0519b7db64cd8 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 15:19:11 +0100 Subject: [PATCH 07/11] Adjust CI Status Widget header height and margin for improved layout --- src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts | 2 +- .../sessions/contrib/changes/browser/media/ciStatusWidget.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts index 606107329c4..750719fba72 100644 --- a/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts +++ b/src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts @@ -148,7 +148,7 @@ class CICheckListRenderer implements IListRenderer Date: Tue, 31 Mar 2026 15:22:19 +0100 Subject: [PATCH 08/11] Add right padding to header on focus for improved accessibility Co-authored-by: Copilot --- src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 4b9727c3211..42a07b04e9e 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -36,6 +36,7 @@ .ci-status-widget-header:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; + padding-right: 22px; } /* Chevron — right-aligned, visible on hover only */ From 8c99a135c163ad4443731c54a66ca9aba620be5e Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 15:24:40 +0100 Subject: [PATCH 09/11] Add right padding to header on focus for improved accessibility --- .../contrib/changes/browser/media/ciStatusWidget.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 42a07b04e9e..6de40dde9ef 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -33,10 +33,13 @@ padding-right: 22px; } +.ci-status-widget-header:focus { + padding-right: 22px; +} + .ci-status-widget-header:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; - padding-right: 22px; } /* Chevron — right-aligned, visible on hover only */ From d6c22f5130e1635d4c0afcf5a863acad92d8d355 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 15:41:55 +0100 Subject: [PATCH 10/11] Refactor CI Status Widget CSS for improved layout and visibility Co-authored-by: Copilot --- .../changes/browser/media/ciStatusWidget.css | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 6de40dde9ef..81f254af94f 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -18,7 +18,7 @@ position: relative; display: flex; align-items: center; - gap: 6px; + /* gap: 6px; */ padding: 6px 4px; margin-top: 4px; border-radius: 8px; @@ -90,11 +90,6 @@ padding-right: 8px; } -.ci-status-widget.has-fix-actions:hover .ci-status-widget-counts, -.ci-status-widget.has-fix-actions:focus-within .ci-status-widget-counts { - visibility: hidden; -} - .ci-status-widget-count-badge { display: inline-flex; align-items: center; @@ -125,13 +120,8 @@ .ci-status-widget-header-actions { flex-shrink: 0; - display: none; - align-items: center; -} - -.ci-status-widget:hover .ci-status-widget-header-actions.has-actions, -.ci-status-widget:focus-within .ci-status-widget-header-actions.has-actions { display: flex; + align-items: center; } .ci-status-widget-header-actions .monaco-action-bar { From 9341e572cfd2a3e0982a74136093a5db9bb36963 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 31 Mar 2026 15:54:07 +0100 Subject: [PATCH 11/11] Hide status counts on hover and focus for improved UI clarity Co-authored-by: Copilot --- .../sessions/contrib/changes/browser/media/ciStatusWidget.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css index 81f254af94f..94586fbd9b0 100644 --- a/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css +++ b/src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css @@ -90,6 +90,10 @@ padding-right: 8px; } +.ci-status-widget-header:hover .ci-status-widget-counts, .ci-status-widget-header:focus .ci-status-widget-counts { + visibility: hidden; +} + .ci-status-widget-count-badge { display: inline-flex; align-items: center;