From 40f223cf38b0ceab6604707e0136c5b071ddf6bf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 21:25:21 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20make=20sankey=20chart=20responsive=20?=
 =?UTF-8?q?=E2=80=94=20no=20horizontal=20scrolling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace fixed numSteps*250 width calculation with ResizeObserver
that measures the container and fits the chart within it.
---
 components/journeys/SankeyJourney.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index b084b66..23667b9 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Sankey } from '@nivo/sankey'
 import { TreeStructure, X } from '@phosphor-icons/react'
 import type { PathTransition } from '@/lib/api/journeys'
@@ -258,10 +258,20 @@ export default function SankeyJourney({
 
   const labelColor = isDark ? '#a3a3a3' : '#525252'
 
-  // Calculate dimensions: give each step ~250px of horizontal space
-  const numSteps = new Set(data.nodes.map((n) => n.stepIndex)).size
-  const chartWidth = Math.max(800, numSteps * 250)
   const chartHeight = 500
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [chartWidth, setChartWidth] = useState(800)
+
+  // * Measure container width and resize chart to fit without horizontal scroll
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const measure = () => setChartWidth(el.clientWidth)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
 
   return (
     <div>
@@ -285,7 +295,7 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div className="overflow-x-auto -mx-6 px-6" style={{ maxHeight: chartHeight + 16 }}>
+      <div ref={containerRef} style={{ height: chartHeight }}>
         <div style={{ width: chartWidth, height: chartHeight }}>
           <Sankey<SankeyNode, SankeyLink>
             data={data}