From e7907d68bf4376566b2729e4fdb0d953cf7a8414 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 15 Mar 2026 13:39:41 +0100
Subject: [PATCH] fix: default depth 10, bar rounding, exit row height,
 connection line reach

---
 app/sites/[id]/journeys/page.tsx      | 8 ++++----
 components/journeys/ColumnJourney.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 61ae39b..0953d0e 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -37,8 +37,8 @@ export default function JourneysPage() {
   const [period, setPeriod] = useState('30')
   const [dateRange, setDateRange] = useState(() => getDateRange(30))
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
-  const [depth, setDepth] = useState(3)
-  const [displayDepth, setDisplayDepth] = useState(3)
+  const [depth, setDepth] = useState(10)
+  const [displayDepth, setDisplayDepth] = useState(10)
   const [entryPath, setEntryPath] = useState('')
 
   const sliderIndex = DEPTH_STEPS.indexOf(displayDepth)
@@ -160,9 +160,9 @@ export default function JourneysPage() {
                 onChange={(value) => setEntryPath(value)}
                 options={entryPointOptions}
               />
-              {(depth !== 3 || entryPath) && (
+              {(depth !== 10 || entryPath) && (
                 <button
-                  onClick={() => { setDepth(3); setDisplayDepth(3); setEntryPath('') }}
+                  onClick={() => { setDepth(10); setDisplayDepth(10); setEntryPath('') }}
                   className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors whitespace-nowrap"
                 >
                   Reset
diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx
index 1055950..40f0f57 100644
--- a/components/journeys/ColumnJourney.tsx
+++ b/components/journeys/ColumnJourney.tsx
@@ -185,7 +185,7 @@ function PageRow({
       {/* Background bar */}
       {!isOther && barWidth > 0 && (
         <div
-          className="absolute inset-y-1 left-1 right-1 rounded transition-all origin-left"
+          className="absolute inset-y-0 left-0 right-0 rounded-lg transition-all origin-left"
           style={{
             transform: `scaleX(${barWidth / 100})`,
             backgroundColor: isSelected ? 'rgba(253, 94, 15, 0.15)' : 'rgba(253, 94, 15, 0.08)',
@@ -274,7 +274,7 @@ function JourneyColumn({
           <div
             data-col={column.index}
             data-path="(exit)"
-            className="flex items-center justify-between h-9 px-2 -mx-2 rounded-lg bg-red-50 dark:bg-red-500/10"
+            className="flex items-center justify-between h-9 px-2 -mx-2 rounded-lg bg-red-500/8 dark:bg-red-500/8"
           >
             <span className="text-sm text-red-500 dark:text-red-400">
               (exit)
@@ -332,7 +332,7 @@ function ConnectionLines({
       const sourceRect = sourceEl.getBoundingClientRect()
       const sourceY =
         sourceRect.top + sourceRect.height / 2 - containerRect.top + container.scrollTop
-      const sourceX = sourceRect.right - containerRect.left + container.scrollLeft
+      const sourceX = sourceRect.right - containerRect.left + container.scrollLeft + 4
 
       const relevantTransitions = transitions.filter(
         (t) => t.step_index === colIdx && t.from_path === selectedPath
@@ -352,7 +352,7 @@ function ConnectionLines({
         const destRect = destEl.getBoundingClientRect()
         const destY =
           destRect.top + destRect.height / 2 - containerRect.top + container.scrollTop
-        const destX = destRect.left - containerRect.left + container.scrollLeft
+        const destX = destRect.left - containerRect.left + container.scrollLeft - 4
 
         const weight = Math.max(1, Math.min(4, (t.session_count / maxCount) * 4))