The actual cause of the persistent top/bottom card clipping wasn't the
track height or the padding — it's that the CSS spec forces
overflow-y: visible to compute as auto whenever overflow-x is auto.
Browsers clip the scroll container on both axes regardless of how we
declare overflow-y. Every previous fix was band-aiding the same
underlying problem.
Geometric fix: flip cardSide so cards hang toward the centreline
instead of away from it.
- i=0 (dot on centreline) → card below (default, no clip risk)
- i=1 (dot above-centre, odd) → card below (grows toward midY)
- i=2 (dot below-centre, even >0) → card above (grows toward midY)
- …alternating thereafter
Cards now always grow into the track, never out of it. Both axes are
naturally bounded by the track's height. Hover-expanded cards stay
inside the scroll container's clip box, so the browser-forced clipping
has nothing to remove.
Tests updated to expect the new pattern. The 7-item case carries an
extra spot-check that every card's side is opposite to its dot's
offset from the centreline — i.e. the geometric invariant the fix
relies on.
Visual rhythm: cards still alternate above/below as the path swings
up and down; the wave reads the same. What changes is which milestones
have cards above vs below — and only at the visual top of the page
where it improves things by stopping the clipping.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Jonathan Hvid
c0592f7ca5