From e0fec37c6eaae353eece06abcaf5cdb9ab2a61ed Mon Sep 17 00:00:00 2001
From: Lee Murray <mrleemurray@gmail.com>
Date: Thu, 4 Jun 2026 13:33:14 +0100
Subject: [PATCH] Adjust CI status widget layout and styles (#319894)

* fix: update CI status widget icons to compact versions and adjust CSS for improved layout

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

* fix: adjust gap in CI status widget count badge and add opacity to text

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

---------

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>
---
 .../contrib/changes/browser/checksWidget.ts    |  8 ++++----
 .../changes/browser/media/checksWidget.css     | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/vs/sessions/contrib/changes/browser/checksWidget.ts b/src/vs/sessions/contrib/changes/browser/checksWidget.ts
index 08650eb35fb..4821e5fde75 100644
--- a/src/vs/sessions/contrib/changes/browser/checksWidget.ts
+++ b/src/vs/sessions/contrib/changes/browser/checksWidget.ts
@@ -327,25 +327,25 @@ export class CIStatusWidget extends Disposable {
 
 		if (counts.running > 0) {
 			const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-running'));
-			badge.appendChild(renderIcon(Codicon.circleFilled));
+			badge.appendChild(renderIcon(Codicon.circleFilledCompact));
 			dom.append(badge, $('span')).textContent = `${counts.running}`;
 		}
 
 		if (counts.failed > 0) {
 			const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-failure'));
-			badge.appendChild(renderIcon(Codicon.error));
+			badge.appendChild(renderIcon(Codicon.errorCompact));
 			dom.append(badge, $('span')).textContent = `${counts.failed}`;
 		}
 
 		if (counts.pending > 0) {
 			const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-pending'));
-			badge.appendChild(renderIcon(Codicon.circleFilled));
+			badge.appendChild(renderIcon(Codicon.circleFilledCompact));
 			dom.append(badge, $('span')).textContent = `${counts.pending}`;
 		}
 
 		if (counts.successful > 0) {
 			const badge = dom.append(this._countsNode, $('.ci-status-widget-count-badge.ci-status-success'));
-			badge.appendChild(renderIcon(Codicon.passFilled));
+			badge.appendChild(renderIcon(Codicon.passFilledCompact));
 			dom.append(badge, $('span')).textContent = `${counts.successful}`;
 		}
 	}
diff --git a/src/vs/sessions/contrib/changes/browser/media/checksWidget.css b/src/vs/sessions/contrib/changes/browser/media/checksWidget.css
index bfcdd7b7424..9d178230202 100644
--- a/src/vs/sessions/contrib/changes/browser/media/checksWidget.css
+++ b/src/vs/sessions/contrib/changes/browser/media/checksWidget.css
@@ -29,11 +29,11 @@
 
 .ci-status-widget-header:hover {
 	background-color: var(--vscode-list-hoverBackground);
-	padding-right: 22px;
+	padding-right: 26px;
 }
 
 .ci-status-widget-header:focus {
-	padding-right: 22px;
+	padding-right: 26px;
 }
 
 .ci-status-widget-header:focus-visible {
@@ -44,7 +44,7 @@
 /* Chevron — right-aligned, visible on hover only */
 .ci-status-widget-header .group-chevron {
 	position: absolute;
-	right: 4px;
+	right: 8px;
 	top: 50%;
 	transform: translateY(-50%);
 	width: 16px;
@@ -52,7 +52,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 12px;
+	font-size: 16px;
 	visibility: hidden;
 	opacity: 0;
 }
@@ -96,13 +96,17 @@
 .ci-status-widget-count-badge {
 	display: inline-flex;
 	align-items: center;
-	gap: 2px;
+	gap: 4px;
 	font-size: 11px;
 	line-height: 1;
 }
 
-.ci-status-widget-count-badge .codicon {
-	font-size: 14px;
+.monaco-workbench .ci-status-widget-count-badge .codicon[class*='codicon-'] {
+	font-size: var(--vscode-codiconFontSize-compact, 12px);
+}
+
+.ci-status-widget-count-badge span:not(.codicon) {
+	opacity: 0.7;
 }
 
 .ci-status-widget-count-badge.ci-status-success .codicon {