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

## ✅ Checklist

- [x] I have followed every step in the [contributing
guide](https://github.com/triggerdotdev/trigger.dev/blob/main/CONTRIBUTING.md)
- [x] The PR title follows the convention.
- [x] I ran and tested the code works

---

## Testing

Ran the webapp locally with `CLOUD_ENV=development` and verified the
usage page chart height at different viewport sizes. The chart now
renders at a fixed 320px height instead of expanding to fill the
viewport.

---

## Changelog

Fix the "Usage by day" chart on the usage settings page taking up 100%
of the viewport height.

The regression was introduced in PR #2905 when the `UsageChart` was
migrated from using `ChartContainer` directly (with `max-h-96 min-h-40
w-full`) to the new `Chart.Root` compound component. The
`ChartContainer` base class includes `aspect-video` (16:9 ratio), and
the `max-h-96` constraint was lost during migration, causing the chart
to scale its height based on viewport width.

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

---

## Screenshots

Before (chart fills entire viewport):

![before](https://app.devin.ai/api/presigned_proxy?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmdfaWQiOiJvcmctMWYzMWQ4ZTQ4NjI3NGRjYTg5MDM5MGQ4ZWY2YWVjNzQiLCJ1c2VyX2lkIjpudWxsLCJidWNrZXRfbmFtZSI6ImRldmluYXR0YWNobWVudHMiLCJidWNrZXRfa2V5IjoiYXR0YWNobWVudHNfcHJpdmF0ZS9vcmctMWYzMWQ4ZTQ4NjI3NGRjYTg5MDM5MGQ4ZWY2YWVjNzQvOGRhMTdiMDEtZThiOC00MGI4LWIxOGUtNmJmMzc0ZjYzYjMxIiwiaWF0IjoxNzc3NDU1Mjg2LCJleHAiOjE3NzgwNjAwODYsImZpbGVuYW1lIjoiY3VycmVudC1icm9rZW4ucG5nIn0.LU6idghnalKHL2ZAJGVxWTmPnuUgoL-6QNRdk3bDJqg)

After (chart constrained to 320px):

![after](https://app.devin.ai/api/presigned_proxy?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmdfaWQiOiJvcmctMWYzMWQ4ZTQ4NjI3NGRjYTg5MDM5MGQ4ZWY2YWVjNzQiLCJ1c2VyX2lkIjpudWxsLCJidWNrZXRfbmFtZSI6ImRldmluYXR0YWNobWVudHMiLCJidWNrZXRfa2V5IjoiYXR0YWNobWVudHNfcHJpdmF0ZS9vcmctMWYzMWQ4ZTQ4NjI3NGRjYTg5MDM5MGQ4ZWY2YWVjNzQvMDliN2E2YzktZjIzYi00YTJiLWE0N2EtMTk3NzBhZGU1MmU3IiwiaWF0IjoxNzc3NDU1Mjg2LCJleHAiOjE3NzgwNjAwODYsImZpbGVuYW1lIjoib3B0aW9uLWItaDgwLWZpbGxDb250YWluZXIucG5nIn0.uKi3Yw4Z6GvoNuEVO8B4hwSvvHtyYzXUhtSEHcuSvTY)

💯

Link to Devin session:
https://app.devin.ai/sessions/6e5ed40516d3448db85950feb1115ab3

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
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>
   );
 }