b84bd11256
Keeps the Command Center System tab's refresh button inline with the section title and pinned to the far right at all breakpoints, instead of dropping below the title on mobile. - Add a scoped .cc-area-section-header.cc-system-controls-header CSS override (row + space-between) that wins over the shared mobile column-collapse rule for the System tab only - Add data-testid="cc-system-refresh" to the refresh button for test targeting - Add regression tests asserting the header stays row-aligned in the DOM and the CSS override is present at the 768px breakpoint - Add a patch changeset documenting the fix Files changed: .changeset/fn-7881-system-refresh-inline.md | 7 +++++++ .../__tests__/SystemControlsArea.test.tsx | 23 ++++++++++++++++++++++ .../command-center/areas/SystemControlsArea.css | 22 +++++++++++++++++++++ .../command-center/areas/SystemControlsArea.tsx | 3 ++- 4 files changed, 54 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-7881 Fusion-Task-Lineage: 80c6fd78-b7e0-4899-b509-b69b8d21e82d Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
160 lines
3.5 KiB
CSS
160 lines
3.5 KiB
CSS
/*
|
|
FNXC:SystemPanel 2026-07-12-11:50:
|
|
Operator System-controls panel styling for the Command Center System tab.
|
|
Follows the tokenized cc-* rhythm (space/radius/surface vars) so control cards
|
|
sit visually beside the SystemStatsArea telemetry cards. The rebuild output and
|
|
log tail use a terminal-style scroll box bounded in height so streaming output
|
|
never grows the page; the page must not scroll horizontally (pre wraps).
|
|
*/
|
|
|
|
/*
|
|
FNXC:SystemPanel 2026-07-12-17:10:
|
|
The System-controls refresh button must stay inline with the "System controls"
|
|
title and pinned to the far right on every breakpoint. The shared
|
|
.cc-area-section-header collapses to a left-aligned column at <=768px (correct
|
|
for analytics areas), so scope a row+space-between override to the System tab
|
|
only, using a two-class selector so it wins over the shared mobile rule.
|
|
*/
|
|
.cc-area-section-header.cc-system-controls-header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cc-area-section-header.cc-system-controls-header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.cc-syscontrols-grid {
|
|
min-inline-size: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.cc-syscontrol-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.cc-syscontrol-head {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.cc-syscontrol-icon {
|
|
color: var(--text-muted);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.cc-syscontrol-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.cc-syscontrol-desc {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.cc-syscontrol-note {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.cc-syscontrol-cta {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.cc-syscontrols-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
margin-block-end: var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-2, var(--surface));
|
|
}
|
|
|
|
.cc-syscontrols-banner--back {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cc-syscontrols-banner--error {
|
|
justify-content: space-between;
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.cc-syscontrols-job-status {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.cc-syscontrols-job-status--succeeded {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.cc-syscontrols-job-status--failed {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.cc-syscontrols-output {
|
|
margin: 0;
|
|
padding: var(--space-md);
|
|
max-block-size: 20rem;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-2, var(--surface));
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.cc-syscontrols-logs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cc-syscontrols-log-line {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.cc-syscontrols-log-line--warn .cc-syscontrols-log-message {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.cc-syscontrols-log-line--error .cc-syscontrols-log-message {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.cc-syscontrols-log-time {
|
|
color: var(--text-muted);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.cc-syscontrols-log-prefix {
|
|
color: var(--text-muted);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.cc-syscontrols-log-message {
|
|
word-break: break-word;
|
|
}
|