No description
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> |
||
|---|---|---|
| .claude | ||
| content | ||
| design | ||
| migrations | ||
| public | ||
| scripts | ||
| src | ||
| tests | ||
| .env.example | ||
| .gitignore | ||
| astro.config.mjs | ||
| CLAUDE.md | ||
| DECISIONS.md | ||
| HANDOVER.md | ||
| KNOWN_ISSUES.md | ||
| package.json | ||
| pnpm-lock.yaml | ||
| SPEC.md | ||
| todo.md | ||
| tsconfig.json | ||
| vitest.config.ts | ||