From c9ac7236a77577a134023d91330f84dceab9b577 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Mon, 6 Jul 2026 19:00:46 -0600
Subject: [PATCH] fix(requests): remove nested ResponsiveContainer breaking
 chart height

---
 .../requests/request-distribution-chart.tsx   | 122 ++++++++----------
 1 file changed, 55 insertions(+), 67 deletions(-)

diff --git a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
index c760c8175..d9bc17973 100644
--- a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
+++ b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
@@ -1,11 +1,4 @@
-import {
-	Area,
-	AreaChart,
-	CartesianGrid,
-	ResponsiveContainer,
-	XAxis,
-	YAxis,
-} from "recharts";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	type ChartConfig,
 	ChartContainer,
@@ -49,65 +42,60 @@ export const RequestDistributionChart = ({
 	);
 
 	return (
-		<div className="w-full h-[200px] overflow-hidden">
-			<ResponsiveContainer
-				width="100%"
-				height="100%"
-				className="overflow-hidden"
+		<ChartContainer
+			config={chartConfig}
+			className="aspect-auto h-[200px] w-full"
+		>
+			<AreaChart
+				accessibilityLayer
+				data={stats || []}
+				margin={{
+					top: 10,
+					left: 12,
+					right: 12,
+					bottom: 0,
+				}}
 			>
-				<ChartContainer config={chartConfig}>
-					<AreaChart
-						accessibilityLayer
-						data={stats || []}
-						margin={{
-							top: 10,
-							left: 12,
-							right: 12,
-							bottom: 0,
-						}}
-					>
-						<CartesianGrid vertical={false} />
-						<XAxis
-							dataKey="hour"
-							tickLine={false}
-							axisLine={false}
-							tickMargin={8}
-							tickFormatter={(value) =>
-								new Date(value).toLocaleTimeString([], {
-									hour: "2-digit",
-									minute: "2-digit",
-								})
-							}
-						/>
-						<YAxis
-							tickLine={false}
-							axisLine={false}
-							tickMargin={8}
-							allowDataOverflow={false}
-							domain={[0, "auto"]}
-						/>
-						<ChartTooltip
-							cursor={false}
-							content={<ChartTooltipContent indicator="line" />}
-							labelFormatter={(value) =>
-								new Date(value).toLocaleString([], {
-									month: "short",
-									day: "numeric",
-									hour: "2-digit",
-									minute: "2-digit",
-								})
-							}
-						/>
-						<Area
-							dataKey="count"
-							type="monotone"
-							fill="hsl(var(--chart-1))"
-							fillOpacity={0.4}
-							stroke="hsl(var(--chart-1))"
-						/>
-					</AreaChart>
-				</ChartContainer>
-			</ResponsiveContainer>
-		</div>
+				<CartesianGrid vertical={false} />
+				<XAxis
+					dataKey="hour"
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+					tickFormatter={(value) =>
+						new Date(value).toLocaleTimeString([], {
+							hour: "2-digit",
+							minute: "2-digit",
+						})
+					}
+				/>
+				<YAxis
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+					allowDataOverflow={false}
+					domain={[0, "auto"]}
+				/>
+				<ChartTooltip
+					cursor={false}
+					content={<ChartTooltipContent indicator="line" />}
+					labelFormatter={(value) =>
+						new Date(value).toLocaleString([], {
+							month: "short",
+							day: "numeric",
+							hour: "2-digit",
+							minute: "2-digit",
+						})
+					}
+				/>
+				<Area
+					dataKey="count"
+					type="monotone"
+					fill="hsl(var(--chart-1))"
+					fillOpacity={0.4}
+					stroke="hsl(var(--chart-1))"
+				/>
+			</AreaChart>
+		</ChartContainer>
 	);
 };