Jonathan Hvid
c0592f7ca5
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> |
||
|---|---|---|
| .. | ||
| components | ||
| content | ||
| layouts | ||
| lib | ||
| pages | ||
| styles | ||
| env.d.ts | ||
| middleware.ts | ||