Skip to content

design(timeline): add day-column gridlines so bars read against dated columns - #205

Merged
johnpc merged 1 commit into
mainfrom
design/timeline-gridlines
Aug 2, 2026
Merged

design(timeline): add day-column gridlines so bars read against dated columns#205
johnpc merged 1 commit into
mainfrom
design/timeline-gridlines

Conversation

@johnpc

@johnpc johnpc commented Aug 2, 2026

Copy link
Copy Markdown
Owner

Design-polish pass — the Timeline (Gantt) view. The timeline had no vertical column delineation (just a hairline under the header row), so task bars floated in undifferentiated space — you couldn't tell which day a bar actually sat on or spanned to. It read as loose colored pills rather than a dated schedule.

Fix (CSS-only, tokens only)

Added faint day-column gridlines behind the bars via a repeating-linear-gradient on .timeline__rows — a 1px token-colored (--tf-border) hairline every 1/14 of the width, matching the 14-day grid. No markup or layout change; bars keep their exact positions but now sit against readable dated columns.

The payoff is biggest on mobile, where the timeline scrolls at a wider min-width — each bar's day is now unambiguous.

Before → after

Full quality gate green (16 timeline tests pass); presentational-only. Verified against the sandbox (AWS_PROFILE=personal).

@johnpc
johnpc merged commit 384b757 into main Aug 2, 2026
78 checks passed
@johnpc
johnpc deleted the design/timeline-gridlines branch August 2, 2026 20:07
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