josh/Vetting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fit pipeline timeline without horizontal scroll
CI / Lint + build + test (push) Successful in 1m39s
Details
Release / release (push) Successful in 7m30s
Details

Browse Source 
15 nodes (3 pre-stage + 11 stage + Completed) exceeded the 1280px main
container's usable width, producing a horizontal scrollbar under the
pipeline on the run page. Widen main to 1440px, tighten per-node min
widths, drop the scrollbar, and split camelCase labels so multi-word
stages ("WaitingReboot", "SpecValidate", "CPUStress") wrap onto two
lines instead of forcing node width.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-04-19 22:51:10 -04:00
parent 3656af9823
commit e73b221a8c
3 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+9 -8
View File
@@ -44,7 +44,7 @@ a:hover { text-decoration: underline; }
.topbar .heartbeat { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.topbar .logout-form { margin: 0; }
main { max-width: 1280px; margin: 0 auto; padding: 24px; }
main { max-width: 1440px; margin: 0 auto; padding: 24px; }
button, .button, .button-secondary {
appearance: none;
@@ -492,16 +492,16 @@ body.bare main { max-width: none; }
}
/* ===== Pipeline timeline =====
13 nodes (3 pre-stage + 9 stage + Completed). flex:1 on every node
so they share the full width evenly; overflow-x:auto only kicks in
on very narrow viewports. */
15 nodes (3 pre-stage + 11 stage + Completed). flex:1 on every node
so they share the full width evenly. Multi-word labels
(stageDisplayName in pipeline.templ) wrap on two lines so nodes pack
tight without horizontal scroll. */
.pipeline {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
overflow-x: auto;
padding: 28px 12px 16px;
padding: 28px 8px 16px;
background: #0b0d12;
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -512,8 +512,8 @@ body.bare main { max-width: none; }
align-items: center;
gap: 6px;
flex: 1 1 0;
min-width: 72px;
padding: 0 4px;
min-width: 56px;
padding: 0 2px;
}
.stage-dot {
width: 28px;
@@ -543,6 +543,7 @@ body.bare main { max-width: none; }
text-align: center;
font-weight: 500;
line-height: 1.2;
overflow-wrap: anywhere;
}
.stage-node-passed .stage-name { color: var(--text); }
.stage-node-running .stage-name { color: var(--accent); font-weight: 600; }