Skip to content

fix(timeline): hour-axis geometry is 20px out of sync with set/date-label positioning #207

Description

@chiptus

What's wrong

The horizontal timeline's hour-tick axis and its rendered content use two different coordinate origins:

  • TimeScale.tsx:174 places hour markers at the raw timeToOffset(timeSlot, timeSlots[0]) — no left padding.
  • StageRow.tsx:33 places set blocks at set.horizontalPosition.left + 20.
  • TimeScale.tsx:44 places day-change labels at timeToOffset(midnightOfNewDate, festivalStart) + 20.

So sets and day-change labels render ~20px (~10 minutes at 2px/minute) to the right of where the hour axis says they should be.

Flagged by Copilot's automated review on PR #201, against useTimelineScrollSync.ts's scrollTo conversion:

That PR's response confirmed the scrollTo conversion itself is self-consistent with the hour axis (mount restore round-trips to the exact same scrollLeft regardless of the offset), so it wasn't a blocker there — but the underlying 20px mismatch is a real, pre-existing bug, out of scope for that PR.

Impact

Any feature that visually reasons about "where a set is" relative to the hour axis — the scrollTo/URL-state feature, and future now-indicator / jump-to-time work — will be off by ~10 minutes from what a user perceives when eyeballing set positions against the axis.

Fix

Pick one consistent origin for all horizontal-timeline positioning and apply it everywhere: either drop the + 20 from StageRow.tsx and TimeScale.tsx's date labels, or add the same + 20 to the hour-tick axis. timeToOffset/offsetToTime (src/lib/timelineCalculator.ts), set blocks, date labels, and hour ticks all need to agree.

References

  • src/pages/EditionView/tabs/ScheduleTab/horizontal/StageRow.tsx:33
  • src/pages/EditionView/tabs/ScheduleTab/horizontal/TimeScale.tsx:44,174
  • src/lib/timelineCalculator.ts (timeToOffset/offsetToTime)

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions