fix(webapp): constrain usage chart height to 320px

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>

Author: devin-ai-integration[bot]

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>
   );
 }