From b4df8e10f1ce9224ffbaa7e6e9e38eec7725801d Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 14:32:29 +0200
Subject: [PATCH] fix(route): span ~80% of viewport + scroll padding back to 60
 + track 420
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three coupled fixes to the route's geometry:

- computeRouteLayout's width calculation flipped to Math.max(viewport
  * 0.80, itemCount * minSpacing + padding * 2). On a wide screen with
  few items the 80% target wins and the path stretches across the
  page; once item count makes the data-driven width exceed 80% (the
  carousel case), the data-driven value wins and the track extends
  past the viewport unchanged.
- .rr-scroll horizontal padding 140 → 60 each side. The previous 140
  was overcompensating; with the new 80% target the milestones already
  sit inside their own breathing room. 60 is card-half + 30px buffer,
  enough for a 220px card centred under a dot 60px from the edge.
  scroll-padding kept in sync at 60 for snap-stop landings.
- trackHeight default 580 → 420; midY 290 → 210. The 580 was bandaging
  the vertical-clipping issue — that fix lands in the next commit. With
  the clip properly addressed, 420 fits the path's amplitude 120 swing
  cleanly with no wasted vertical space.

Tests rewritten to match the new width semantics: 1 item @ 1000 →
920px (0.8 * 1000 + 120); 3 items @ 1400 → 1240px; 20 items @ 800 →
6200px (data-driven wins). midY assertion 290 → 210.

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

diff --git a/src/components/RoadmapRoute.astro b/src/components/RoadmapRoute.astro
index 1270ba2..ae32db5 100644
--- a/src/components/RoadmapRoute.astro
+++ b/src/components/RoadmapRoute.astro
@@ -72,8 +72,8 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[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: 580px;`}>
-        <svg class="rr-path" width={layout.trackWidth} height="580" aria-hidden="true">
+      <div class="rr-track" style={`width: ${layout.trackWidth}px; height: 420px;`}>
+        <svg class="rr-path" width={layout.trackWidth} height="420" 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"/>
@@ -243,12 +243,12 @@ const initialShippingX = lastShippingIndex >= 0 ? layout.itemX[lastShippingIndex
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
-    /* 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;
+    /* 60px is enough for a 220px card centred under a dot 60px from
+       the edge — card extends 50px past the dot, sits inside the
+       padded container. */
+    padding: 0 60px 8px;
+    scroll-padding-left: 60px;
+    scroll-padding-right: 60px;
   }
   .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 7dcb2d1..0c7bf15 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  ?? 580;
+  const trackHeight = opts.trackHeight  ?? 420;
   const amplitude   = opts.amplitude    ?? 120;
   const padding     = opts.paddingX     ?? 60;
   const midY        = trackHeight / 2;
@@ -51,11 +51,13 @@ export function computeRouteLayout(opts: LayoutOpts): LayoutResult {
     };
   }
 
-  const usableWidth = Math.max(
-    opts.viewportWidth - padding * 2,
-    (itemCount - 1) * minSpacing,
-  );
-  const trackWidth = usableWidth + padding * 2;
+  // Aim for ~80% of viewport for low item counts; data-driven minimum
+  // takes over once items × minSpacing exceeds that target (the carousel
+  // case — track extends past viewport).
+  const targetUsableWidth = opts.viewportWidth * 0.80;
+  const dataDrivenWidth   = (itemCount - 1) * minSpacing;
+  const usableWidth       = Math.max(targetUsableWidth, dataDrivenWidth);
+  const trackWidth        = usableWidth + padding * 2;
 
   const itemX: number[] = Array.from({ length: itemCount }, (_, i) =>
     itemCount === 1
diff --git a/tests/roadmap-layout.test.ts b/tests/roadmap-layout.test.ts
index 8425dd2..a4b7d5d 100644
--- a/tests/roadmap-layout.test.ts
+++ b/tests/roadmap-layout.test.ts
@@ -10,12 +10,13 @@ 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.midY).toBe(210); // trackHeight 420 / 2
     expect(out.itemY).toEqual([out.midY]);
     expect(out.cardSide).toEqual(['below']);
     expect(out.pathD.startsWith('M ')).toBe(true);
     expect(out.pathD).not.toContain('C ');
-    expect(out.trackWidth).toBeGreaterThanOrEqual(1000);
+    // Target usable width = 1000 * 0.8 = 800; trackWidth = 800 + 60*2 = 920
+    expect(out.trackWidth).toBe(920);
   });
 
   it('2 items — itemX strictly increasing, cardSide alternates below/above', () => {
@@ -50,18 +51,18 @@ describe('computeRouteLayout', () => {
     expect((out.pathD.match(/C /g) ?? []).length).toBe(6);
   });
 
-  it('20 items — track expands beyond viewport, spacing respects minSpacingX', () => {
+  it('20 items — data-driven width wins over the 80% target', () => {
     const out = computeRouteLayout({ itemCount: 20, viewportWidth: 800 });
     expect(isStrictlyIncreasing(out.itemX)).toBe(true);
-    expect(out.trackWidth).toBeGreaterThan(800);
-    // With minSpacing 320 and 20 items, the route should be at least
-    // (20 - 1) * 320 + 2 * 60 = 6200px wide
-    expect(out.trackWidth).toBeGreaterThanOrEqual(6200);
+    // (20 - 1) * 320 + 60 * 2 = 6200; clearly beats 800 * 0.8 + 120 = 760.
+    expect(out.trackWidth).toBe(6200);
   });
 
-  it('trackWidth is never smaller than the viewport width', () => {
-    const out = computeRouteLayout({ itemCount: 1, viewportWidth: 2000 });
-    expect(out.trackWidth).toBeGreaterThanOrEqual(2000);
+  it('few items on a wide viewport — track ≈ 80% of viewport + padding', () => {
+    // 3 items at viewport 1400. Data-driven = 2 * 320 + 120 = 760.
+    // 80% target = 1400 * 0.8 + 120 = 1240 — should win.
+    const out = computeRouteLayout({ itemCount: 3, viewportWidth: 1400 });
+    expect(out.trackWidth).toBe(1240);
   });
 });