From d25910ffc372fd06acfacbb6c805905cd98cb019 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 11 Feb 2026 21:27:23 +0100
Subject: [PATCH] fix: update layout and styling in Chart component for
 improved readability and alignment

---
 components/dashboard/Chart.tsx | 25 ++++++-------------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 9a5e559..b0c74ff 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -570,26 +570,13 @@ export default function Chart({
             <p className="text-xs text-neutral-400 dark:text-neutral-500">Try selecting another metric or date range</p>
           </div>
         ) : (
-          <div className="h-[360px] w-full flex flex-row items-stretch">
-            {/* * Vertical Y-axis label (text reads bottom-to-top) */}
-            <div
-              className="flex items-center justify-center flex-shrink-0"
-              style={{ width: 14 }}
-            >
-              <span
-                className="text-xs font-medium whitespace-nowrap"
-                style={{
-                  color: colors.axis,
-                  transform: 'rotate(-90deg)',
-                  transformOrigin: 'center center',
-                }}
-              >
-                {metricLabel}
-              </span>
+          <div className="h-[360px] w-full flex flex-col">
+            <div className="text-xs font-medium mb-1 flex-shrink-0" style={{ color: colors.axis }}>
+              {metricLabel}
             </div>
-            <div className="flex-1 min-h-0 min-w-0">
+            <div className="flex-1 min-h-0 w-full">
               <ResponsiveContainer width="100%" height="100%">
-                <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 20, bottom: 0 }}>
+                <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 24, bottom: 24 }}>
                 <defs>
                   <linearGradient id={`gradient-${metric}`} x1="0" y1="0" x2="0" y2="1">
                     <stop offset="0%" stopColor={activeMetric.color} stopOpacity={0.35} />
@@ -613,7 +600,7 @@ export default function Chart({
                   tickLine={false}
                   axisLine={false}
                   domain={[0, 'auto']}
-                  width={28}
+                  width={24}
                   tickFormatter={(val) => {
                     if (metric === 'bounce_rate') return `${val}%`
                     if (metric === 'avg_duration') return formatAxisDuration(val)