From 6098b5e1580a92ea78dc010429d91fcaa0746bdf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:23:47 +0100
Subject: [PATCH] feat: replace vertical funnel with horizontal funnel chart

Switched to horizontal orientation with grouped labels for better
readability across multi-step funnels.
---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 9fd7a5c..1dd4ab6 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -216,16 +216,18 @@ export default function FunnelReportPage() {
         </div>
 
         {/* Chart */}
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
+        <div className="bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
+          <h3 className="text-lg font-semibold text-white mb-6">
             Funnel Visualization
           </h3>
           <FunnelChart
             data={chartData}
-            orientation="vertical"
+            orientation="horizontal"
             color="var(--chart-1)"
             layers={3}
-            className="mx-auto max-w-md"
+            labelLayout="grouped"
+            labelAlign="center"
+            labelOrientation="vertical"
           />
         </div>