From 969887cc67a6a19c85a189517744fdd440dac7a9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 13 Mar 2026 13:08:28 +0100
Subject: [PATCH] style: use CartesianGrid for horizontal lines aligned with
 Y-axis ticks

Replace the CSS overlay with Recharts CartesianGrid (horizontal only)
so lines align perfectly with the Y-axis values.
---
 components/dashboard/Chart.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 5305cc0..50062ab 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
-import { Line, LineChart, XAxis, YAxis, ReferenceLine } from 'recharts'
+import { CartesianGrid, Line, LineChart, XAxis, YAxis, ReferenceLine } from 'recharts'
 import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
@@ -384,17 +384,7 @@ export default function Chart({
           </div>
         </CardHeader>
 
-        <CardContent className="px-2.5 py-4 relative overflow-hidden">
-          {/* Subtle horizontal lines background */}
-          <div
-            className="pointer-events-none absolute inset-0"
-            style={{
-              backgroundImage: 'repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--chart-grid) 39px, var(--chart-grid) 40px)',
-              opacity: 0.5,
-              maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
-              WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
-            }}
-          />
+        <CardContent className="px-2.5 py-4">
           {/* Toolbar */}
           <div className="flex items-center justify-between gap-3 mb-4 px-2">
             <div className="flex items-center gap-3">
@@ -485,6 +475,13 @@ export default function Chart({
                     </filter>
                   </defs>
 
+                  <CartesianGrid
+                    horizontal={true}
+                    vertical={false}
+                    stroke="var(--chart-grid)"
+                    strokeOpacity={0.7}
+                  />
+
                   <XAxis
                     dataKey="date"
                     axisLine={false}