feat: add pending task drilldown

This commit is contained in:
Codex
2026-05-04 16:22:01 +00:00
parent 3207b9ecb1
commit 7e4dce47cd
9 changed files with 253 additions and 29 deletions
+57 -7
View File
@@ -203,7 +203,7 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
align-items: start;
}
.overview-grid .panel:nth-child(3), .dispatch-grid .panel:first-child, .topology-grid .panel:nth-child(3) { grid-column: 1 / -1; }
.overview-grid .panel:nth-child(n+3), .dispatch-grid .panel:first-child, .topology-grid .panel:nth-child(3) { grid-column: 1 / -1; }
.panel {
min-width: 0;
@@ -238,6 +238,16 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
border: 1px solid var(--line-soft);
background: var(--panel-2);
}
.metric-card.clickable {
cursor: pointer;
outline: none;
}
.metric-card.clickable:hover, .metric-card.clickable:focus-visible {
border-color: var(--accent);
background:
linear-gradient(90deg, rgba(215, 161, 58, 0.11), transparent 70%),
var(--panel-2);
}
.metric-card.ok { border-color: rgba(113, 191, 120, 0.42); }
.metric-card.warn { border-color: rgba(215, 161, 58, 0.45); }
.metric-label {
@@ -836,7 +846,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
.dispatch-form { grid-template-columns: 1fr 1fr; }
.dispatch-actions { align-items: center; }
.page-grid, .docker-layout, .monitor-layout { grid-template-columns: 1fr; }
.overview-grid .panel:nth-child(3), .dispatch-grid .panel:first-child, .topology-grid .panel:nth-child(3) { grid-column: 1; }
.overview-grid .panel:nth-child(n+3), .dispatch-grid .panel:first-child, .topology-grid .panel:nth-child(3) { grid-column: 1; }
}
@media (max-width: 760px) {
@@ -844,21 +854,61 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
.shell { grid-template-columns: 1fr; }
.rail {
position: static;
height: auto;
height: 42px;
display: flex;
gap: 6px;
align-items: center;
gap: 4px;
padding: 4px 6px;
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.brand { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; flex: 0 0 auto; }
.module { width: auto; min-width: 120px; grid-template-columns: 1fr; border-left: 0; border-bottom: 2px solid transparent; }
.brand {
flex: 0 0 auto;
height: 32px;
margin: 0 3px 0 0;
padding: 0 8px 0 0;
border-bottom: 0;
border-right: 1px solid var(--line-soft);
}
.brand-mark {
width: 30px;
height: 24px;
font-size: 11px;
}
.brand-text { display: none; }
.module {
width: auto;
min-width: 88px;
min-height: 30px;
grid-template-columns: auto 1fr;
gap: 5px;
padding: 4px 8px;
margin: 0;
border-left: 0;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.module-code { font-size: 9px; letter-spacing: 0.08em; }
.module.active, .module:hover { border-bottom-color: var(--accent); }
.workspace { padding: 10px; }
.topbar { align-items: flex-start; flex-direction: column; }
.status-strip { flex-wrap: wrap; white-space: normal; }
.tabs {
height: 38px;
align-items: center;
padding: 5px 0;
gap: 4px;
overflow-y: hidden;
}
.tab {
min-width: auto;
min-height: 28px;
padding: 4px 9px;
white-space: nowrap;
}
.metric-grid, .policy-grid, .security-board, .dispatch-form, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid { grid-template-columns: 1fr; }
.compact-row, .heartbeat-row, .log-row, .endpoint-list article, .volume-route { grid-template-columns: 1fr; align-items: start; }
.docker-hero, .monitor-hero { flex-direction: column; }
.tab { min-width: 104px; }
}