From 6e3619fb1aecd51d3cd3df6071a5eec50ca9a4be Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 18 Aug 2026 16:27:33 -0400
Subject: [PATCH] fix mobile responsiveness issues for charts

---
 .../ToggleableTrendChart.tsx                  | 35 +++++++++++++++----
 src/components/ui/chart.tsx                   |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
index b03d3a77d..3b0f1e7c5 100644
--- a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+++ b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
@@ -3,7 +3,11 @@
 import { useState } from "react";
 import { cn } from "@app/lib/cn";
 import { useTranslations } from "next-intl";
-import { BarChart3, LineChart as LineChartIcon, LoaderIcon } from "lucide-react";
+import {
+    BarChart3,
+    LineChart as LineChartIcon,
+    LoaderIcon
+} from "lucide-react";
 import {
     Bar,
     BarChart,
@@ -63,7 +67,12 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
     const hasData = props.data.length > 0;
 
     return (
-        <div className={cn("relative flex flex-col gap-2", props.className)}>
+        <div
+            className={cn(
+                "relative flex min-w-0 flex-col gap-2",
+                props.className
+            )}
+        >
             <div className="flex items-center justify-between gap-2">
                 <h3 className="font-semibold">{props.title}</h3>
                 <div className="flex gap-1">
@@ -102,17 +111,23 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
             ) : (
                 <ChartContainer
                     config={chartConfig}
-                    className="min-h-50 w-full h-64"
+                    className="aspect-auto min-h-50 h-64 w-full min-w-0 overflow-hidden"
                 >
                     {chartType === "bar" ? (
                         <BarChart accessibilityLayer data={props.data}>
-                            <ChartLegend content={<ChartLegendContent />} />
+                            <ChartLegend
+                                content={
+                                    <ChartLegendContent className="flex-wrap" />
+                                }
+                            />
                             <ChartTooltip
                                 content={
                                     <ChartTooltipContent
                                         indicator="dot"
                                         labelFormatter={(_value, payload) =>
-                                            formatDay(payload?.[0]?.payload?.day)
+                                            formatDay(
+                                                payload?.[0]?.payload?.day
+                                            )
                                         }
                                     />
                                 }
@@ -143,13 +158,19 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
                         </BarChart>
                     ) : (
                         <LineChart accessibilityLayer data={props.data}>
-                            <ChartLegend content={<ChartLegendContent />} />
+                            <ChartLegend
+                                content={
+                                    <ChartLegendContent className="flex-wrap" />
+                                }
+                            />
                             <ChartTooltip
                                 content={
                                     <ChartTooltipContent
                                         indicator="line"
                                         labelFormatter={(_value, payload) =>
-                                            formatDay(payload?.[0]?.payload?.day)
+                                            formatDay(
+                                                payload?.[0]?.payload?.day
+                                            )
                                         }
                                     />
                                 }
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 168393b29..ec2e1c880 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -51,7 +51,7 @@ const ChartContainer = React.forwardRef<
                 data-chart={chartId}
                 ref={ref}
                 className={cn(
-                    "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+                    "flex aspect-video w-full min-w-0 justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
                     className
                 )}
                 {...props}