Skip to content

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

Merged
matthewtsmith merged 2 commits into
mainfrom
fix/track-line-through-finished-stages
Oct 27, 2026
Merged

matthewtsmith merged 2 commits into
mainfrom
fix/track-line-through-finished-stages

Conversation

@matthewtsmith

@matthewtsmith matthewtsmith commented Oct 27, 2026 •

Copy link
Copy Markdown
Member

1. Track line

The pipeline track coloured each connector by the state of the stage it led into. CI runs alongside review and validate, so with review running and CI pending the track showed a green Validate→CI line while Validate had not started, reading as two stages reached at once.

  • Connector is green only through an unbroken run of done/skipped stages (pure CSS: :is(.done, .skipped) + .k::before green, :not(.done, .skipped) ~ .k::before grey).
  • A stage finished out of order (e.g. CI green while Validate pending) keeps its coloured dot but gets no line.
  • Skipped dot's dashed border uses --ink-3; it was nearly invisible in dark themes.

Checked against a 9-state mockup in light and dark.

2. Dashboard scrolls back up in Safari

In Safari (and a Safari Dock web app), scrolling to the feed at the bottom of the dashboard jumped back up within a few seconds; Chrome did not.

Cause: .pl (the pipeline list) was an inline-size container. Each 3s poll rewrites its cards, and WebKit lays the page out short while re-resolving the container, so scrollY is clamped (321 → 77 in the repro) and stays there. Reproduced in Playwright WebKit 26.0; removing that container stopped it, overflow-anchor: none did not.

Fix: the narrow-card query moves to the existing shell container at 1044px (pipeline 760px = shell − 232px sidebar − 52px main padding). Card grid columns match the old CSS exactly in Chrome and WebKit at 600–1400px, including 1044/1045. WebKit now holds scroll for 20s+ of polling.

Tests

pnpm lint && pnpm typecheck && pnpm test green (709). Tests in src/web.test.ts pin the track rules and keep size containers off .pl.

🤖 Generated with Claude Code

https://claude.ai/code/session_01JrFSqr3eJsNihHcgYph1hB

matthewtsmith and others added 2 commits October 26, 2026 22:57
CI runs alongside review and validate, so a running CI turned the
Validate->CI connector green while Validate had not started, and the
track read as two stages reached at once. The connector now greens only
through an unbroken run of done or skipped stages; a stage finished out
of order keeps its dot but gets no line. The skipped dot's dashed border
uses --ink-3 so it shows in dark themes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JrFSqr3eJsNihHcgYph1hB
The pipeline list was its own inline-size container. Each 3s poll
rewrites its cards, and WebKit (Safari, Dock web apps) lays the page out
short while it re-resolves that container, so a reader scrolled to the
feed at the bottom is clamped back up. Chrome does not do this.

The narrow-card query now sits on the shell container at 1044px, the
shell width at which the pipeline is 760px wide (232px sidebar, 52px
main padding). Card layout is identical in Chrome and WebKit at every
width checked, including 1044/1045.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JrFSqr3eJsNihHcgYph1hB
@matthewtsmith matthewtsmith changed the title fix(web): green the track line only through finished stages fix(web): track line through finished stages; WebKit scroll jump Oct 27, 2026
@matthewtsmith
matthewtsmith merged commit 819a2b7 into main Oct 27, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant