fix(timeline): align day-column gridlines with headers and bars - #219
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Grid gap vs gridline pitch.
.timeline__headand.timeline__rowusedgap: 2pxbetween the 14 columns, but the gridlines on.timeline__rowsare drawn withrepeating-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 to0on both grids (bars stay visually distinct via their ownborder-radius/padding).Mobile background width mismatch. The
@media (max-width: 600px)rule gavemin-width: 720pxto.timeline__headand.timeline__row(so the two-week axis scrolls horizontally with legible columns) but not to.timeline__rows— the element that carries the gridlinebackground-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__rowsto the mobilemin-widthrule.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.