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>
This commit is contained in:
Lee Murray
2026-06-04 13:33:14 +01:00
committed by GitHub
parent 86ecbbae37
commit e0fec37c6e
2 changed files with 15 additions and 11 deletions
@@ -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}`;
}
}
@@ -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 {