Skip to content

fix(web): track line through finished stages; WebKit scroll jump #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
matthewtsmith merged 2 commits into from
Oct 27, 2026
Merged

fix(web): track line through finished stages; WebKit scroll jump #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3744d24
fix(web): green the track line only through finished stages
matthewtsmith Oct 27, 2026
fce9629
fix(web): stop WebKit scrolling the dashboard back up on every poll
matthewtsmith Oct 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/web.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,12 @@
.doing .said { color: var(--ink-2); font-style: italic; }

/* Pipeline: the track column and the tag column have fixed widths, so every card's dots sit at
the same x. Below 760px of pipeline width the track takes its own row under the title. */
the same x. Below 760px of pipeline width the track takes its own row under the title. That
width is the shell's minus the 232px sidebar and 52px of main padding, so the query sits on the
shell: a size container on .pl itself makes WebKit lay the page out short while the poll
rewrites the cards, and the clamp scrolls a reader at the bottom of the page back up. */
.track { display: grid; grid-template-columns: repeat(5, 1fr); }
.pl { display: grid; gap: 8px; container: pl / inline-size; }
.pl { display: grid; gap: 8px; }
.pi { padding: 13px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 280px 160px; column-gap: 32px; row-gap: 12px; align-items: center; }
.pi .ttl { min-width: 0; }
.pi .tags { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
Expand All @@ -133,15 +136,18 @@
.track .k { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.track .k::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.track .k:first-child::before { display: none; }
.track .k.done::before, .track .k.active::before, .track .k.failed::before { background: var(--ok); }
/* CI runs alongside review and validate, so the line greens only through an unbroken run of
finished stages; a stage done out of order gets its dot, never a line. */
.track .k:is(.done, .skipped) + .k::before { background: var(--ok); }
.track .k:not(.done, .skipped) ~ .k::before { background: var(--line); }
.track .d { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); }
.track .done { color: var(--ok); } .track .done .d { background: var(--ok); border-color: var(--ok); }
.track .active { color: var(--act, var(--accent)); } .track .active .d { border-color: var(--act, var(--accent)); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 1.6s ease-in-out infinite; }
.track .failed { color: var(--bad); } .track .failed .d { background: var(--bad); border-color: var(--bad); }
.track .skipped .d { border-style: dashed; }
.track .skipped .d { border-style: dashed; border-color: var(--ink-3); }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .track .active .d { animation: none; } }
@container pl (max-width: 760px) {
@container shell (max-width: 1044px) {
.pi { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
.pi .ttl { grid-column: 1; grid-row: 1; }
.pi .tags { grid-column: 2; grid-row: 1; max-width: 160px; }
Expand Down
11 changes: 11 additions & 0 deletions src/web.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -692,6 +692,17 @@ describe("web.html", () => {
expect(html).toContain('post("/api/owner"');
expect(html).toContain('post("/api/unblock"');
});
it("greens the track line only through an unbroken run of finished stages", () => {
expect(html).toContain(".track .k:is(.done, .skipped) + .k::before { background: var(--ok); }");
expect(html).toContain(
".track .k:not(.done, .skipped) ~ .k::before { background: var(--line); }",
);
expect(html).not.toContain(".track .k.active::before");
});
it("keeps size containers off the polled pipeline so WebKit does not reset the scroll", () => {
expect(html).not.toContain("container: pl");
expect(html).toContain("@container shell (max-width: 1044px)");
});
it("lists Waiting on rows by kind and points human waits at Needs you", () => {
expect(html).toContain("Nothing stops new claims");
expect(html).toContain("Fix on GitHub");
Expand Down
Loading