From 1aace48d7304087c5b6e53dea3f67bb43a6a9363 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 14:15:10 +0100
Subject: [PATCH] fix: cap sankey height at 500px, show labels for first/last
 steps only

---
 components/journeys/SankeyJourney.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index 84875a7..d1958cd 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -257,6 +257,9 @@ export default function SankeyJourney({
   }
 
   const labelColor = isDark ? '#a3a3a3' : '#525252'
+  const steps = data.nodes.map((n) => n.stepIndex)
+  const minStep = Math.min(...steps)
+  const maxStep = Math.max(...steps)
 
   return (
     <div>
@@ -280,10 +283,10 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div style={{ height: Math.max(400, Math.min(700, data.nodes.length * 28)) }}>
+      <div style={{ height: 500 }}>
         <ResponsiveSankey<SankeyNode, SankeyLink>
           data={data}
-          margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
+          margin={{ top: 8, right: 140, bottom: 8, left: 140 }}
           align="justify"
           sort="descending"
           colors={(node) =>
@@ -302,7 +305,17 @@ export default function SankeyJourney({
           linkHoverOthersOpacity={0.05}
           linkContract={2}
           enableLinkGradient
-          enableLabels={false}
+          enableLabels
+          label={(node) => {
+            // Only show labels for first and last step columns
+            if (node.stepIndex === minStep || node.stepIndex === maxStep) {
+              return smartLabel(pathFromId(node.id))
+            }
+            return ''
+          }}
+          labelPosition="outside"
+          labelPadding={8}
+          labelTextColor={labelColor}
           isInteractive
           onClick={handleClick}
           nodeTooltip={({ node }) => (