Skip to content

fix(timeline): align day-column gridlines with headers and bars - #219

Merged
johnpc merged 1 commit into
mainfrom
fix/timeline-gridline-alignment
Aug 3, 2026
Merged

fix(timeline): align day-column gridlines with headers and bars#219
johnpc merged 1 commit into
mainfrom
fix/timeline-gridline-alignment

Conversation

@johnpc

@johnpc johnpc commented Aug 3, 2026

Copy link
Copy Markdown
Owner

What

The Timeline (Gantt) day-column gridlines drifted out of alignment with the day-number headers and the task bars — most severely on mobile, where the gridlines painted at roughly twice the density of the columns and read as unrelated to the dates above them.

Two root causes, both introduced when the gridlines were added:

  1. Grid gap vs gridline pitch. .timeline__head and .timeline__row used gap: 2px between the 14 columns, but the gridlines on .timeline__rows are drawn with repeating-linear-gradient(..., 100% / 14) — which ignores the gap. Across 14 columns the 26px of accumulated gap shifted every header/bar progressively off its gridline. Fixed by dropping the inter-column gap to 0 on both grids (bars stay visually distinct via their own border-radius/padding).

  2. Mobile background width mismatch. The @media (max-width: 600px) rule gave min-width: 720px to .timeline__head and .timeline__row (so the two-week axis scrolls horizontally with legible columns) but not to .timeline__rows — the element that carries the gridline background-image. So the background stayed viewport-width (~390px) while the columns were 720px, painting gridlines at ~28px pitch against ~51px columns. Fixed by adding .timeline__rows to the mobile min-width rule.

Token-only CSS change; no markup, behavior, or logic touched.

Demo (mobile, after)

Gridlines now land exactly on the day boundaries and each bar starts on its day's line.

mobile timeline after

@johnpc
johnpc merged commit 3fe18b0 into main Aug 3, 2026
78 checks passed
@johnpc
johnpc deleted the fix/timeline-gridline-alignment branch August 3, 2026 03:14
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