From fde07b1f119f5b573a8a3b981e19249aaaea303a Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 11:56:01 +0200
Subject: [PATCH] =?UTF-8?q?fix(route):=20track=20580=20+=20140px=20scroll-?=
 =?UTF-8?q?container=20padding=20=E2=80=94=20no=20more=20clipping?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The route was clipping at three places: top and bottom of hovered
cards (the track was only 460 tall) and at the left/right viewport
edges (first card half-off-screen at scrollLeft 0, last card off the
right at scrollEnd).

Track height: default trackHeight in roadmap-layout 460 → 580; .rr-track
inline-style and the SVG height matched. midY now 290. Path centreline
stays in the visual centre and gains 60px breathing room above + 60px
below — which is exactly the room a hovered card needs to expand into.

Scroll-container padding: .rr-scroll gains 140px of horizontal padding
plus matching scroll-padding-left/right so snap-stops land cleanly.
The 140 figure is 220px card-width / 2 + 30px buffer, so the first and
last cards have a full card-width of clear space inside the viewport
at the scroll extremes.

Layout helper test verifies midY === 290.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/RoadmapRoute.astro | 11 ++++++++---
 src/lib/roadmap-layout.ts         |  2 +-
 tests/roadmap-layout.test.ts      |  1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/RoadmapRoute.astro b/src/components/RoadmapRoute.astro
index e0bcdd7..590a50d 100644
--- a/src/components/RoadmapRoute.astro
+++ b/src/components/RoadmapRoute.astro
@@ -83,8 +83,8 @@ const initialShippingX = lastShippingIndex >= 0 ? itemXByIndex[lastShippingIndex
   <!-- The route — desktop horizontal -->
   <div class="rr-wrap rr-desktop">
     <div class="rr-scroll" id="rr-scroll">
-      <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 460px;`}>
-        <svg class="rr-path" width={layout.trackWidth} height="460" aria-hidden="true">
+      <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 580px;`}>
+        <svg class="rr-path" width={layout.trackWidth} height="580" aria-hidden="true">
           <defs>
             <linearGradient id="rr-path-gradient" x1="0" y1="0" x2="1" y2="0">
               <stop offset="0" stop-color="#2a2520" stop-opacity="0.55"/>
@@ -289,7 +289,12 @@ const initialShippingX = lastShippingIndex >= 0 ? itemXByIndex[lastShippingIndex
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
-    padding-bottom: 8px;
+    /* Card-half (110px) + breathing buffer (30px) so first/last dots
+       have a card-width of clear space inside the viewport when scrolled
+       to the extremes. scroll-padding makes snap-stops land cleanly. */
+    padding: 0 140px 8px;
+    scroll-padding-left: 140px;
+    scroll-padding-right: 140px;
   }
   .rr-scroll::-webkit-scrollbar { display: none; }
   .rr-track { position: relative; }
diff --git a/src/lib/roadmap-layout.ts b/src/lib/roadmap-layout.ts
index 8fa805a..b489cc9 100644
--- a/src/lib/roadmap-layout.ts
+++ b/src/lib/roadmap-layout.ts
@@ -33,7 +33,7 @@ export interface LayoutResult {
 
 export function computeRouteLayout(opts: LayoutOpts): LayoutResult {
   const minSpacing  = opts.minSpacingX  ?? 320;
-  const trackHeight = opts.trackHeight  ?? 460;
+  const trackHeight = opts.trackHeight  ?? 580;
   const amplitude   = opts.amplitude    ?? 120;
   const padding     = opts.paddingX     ?? 60;
   const midY        = trackHeight / 2;
diff --git a/tests/roadmap-layout.test.ts b/tests/roadmap-layout.test.ts
index c0b2b02..e9e07fb 100644
--- a/tests/roadmap-layout.test.ts
+++ b/tests/roadmap-layout.test.ts
@@ -10,6 +10,7 @@ describe('computeRouteLayout', () => {
   it('1 item — produces a valid single-point M path on the centreline', () => {
     const out = computeRouteLayout({ itemCount: 1, viewportWidth: 1000 });
     expect(out.itemX).toHaveLength(1);
+    expect(out.midY).toBe(290); // trackHeight 580 / 2
     expect(out.itemY).toEqual([out.midY]);
     expect(out.cardSide).toEqual(['below']);
     expect(out.pathD.startsWith('M ')).toBe(true);