Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-17 15:24:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CI Status Widget: Adjust header height, improve padding, and enhance hover/focus styles

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
mrleemurray
2026-03-31 14:52:42 +01:00
parent 2caf5f7a9c
commit 0fbb436619
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts
View File

@@ -148,7 +148,7 @@ class CICheckListRenderer implements IListRenderer<ICICheckListItem, ICICheckTem
*/
export class CIStatusWidget extends Disposable {
static readonly HEADER_HEIGHT = 38;
static readonly HEADER_HEIGHT = 36; // min-height 22px + 12px vertical padding
static readonly MIN_BODY_HEIGHT = 84; // at least 3 checks (3 * 28)
static readonly PREFERRED_BODY_HEIGHT = 112; // preferred 4 checks (4 * 28)
static readonly MAX_BODY_HEIGHT = 240; // at most ~8 checks
@@ -241,7 +241,7 @@ export class CIStatusWidget extends Disposable {
this._toggleCollapsed();
}));
this._register(dom.addDisposableListener(this._headerNode, dom.EventType.KEY_DOWN, e => {
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';

11
src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css
View File

@@ -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;