From 1a2b99924679a56d74bd586a7e9d71fc9c672116 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 29 Apr 2026 09:34:22 +0000
Subject: [PATCH] fix(webapp): constrain usage chart height to 320px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The UsageChart was using Chart.Root with minHeight='160px' but no max
height constraint. The ChartContainer base class includes aspect-video
(16:9 ratio), causing the chart to expand based on viewport width —
often filling the entire screen.

Before PR #2905, the chart used ChartContainer directly with
'max-h-96 min-h-40 w-full'. The migration to Chart.Root lost the
max-height constraint.

Fix: wrap Chart.Root in a fixed-height container (h-80 = 320px) and
use fillContainer prop, which applies !aspect-auto to override the
aspect-video ratio.

Co-Authored-By: nick <55853254+nicktrn@users.noreply.github.com>
---
 .../route.tsx                                 | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
index 0957c06d044..a430a2b5023 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
@@ -311,19 +311,21 @@ function UsageChart({ data }: { data: UsageSeriesData }) {
   );
 
   return (
-    <Chart.Root
-      config={chartConfig}
-      data={data}
-      dataKey="date"
-      showLegend={false}
-      enableZoom={false}
-      minHeight="160px"
-    >
-      <Chart.Bar
-        xAxisProps={{ tickFormatter: xAxisTickFormatter }}
-        yAxisProps={{ tickFormatter: yAxisTickFormatter, allowDecimals: true }}
-        tooltipLabelFormatter={tooltipLabelFormatter}
-      />
-    </Chart.Root>
+    <div className="h-80">
+      <Chart.Root
+        config={chartConfig}
+        data={data}
+        dataKey="date"
+        showLegend={false}
+        enableZoom={false}
+        fillContainer
+      >
+        <Chart.Bar
+          xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+          yAxisProps={{ tickFormatter: yAxisTickFormatter, allowDecimals: true }}
+          tooltipLabelFormatter={tooltipLabelFormatter}
+        />
+      </Chart.Root>
+    </div>
   );
 }