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

[devin-ai-integration]

✅ Checklist

• I have followed every step in the contributing guide
• The PR title follows the convention.
• 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):

After (chart constrained to 320px):

💯

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

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1a2b999

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 1 additional finding.

[devin-ai-integration]

Manual Test Results

Ran the webapp locally against devin/usage-chart-height-fix branch and tested the "Usage by day" chart height fix end-to-end. All 5 tests passed.

Chart Height Fix

• Chart height is exactly 320px — passed (.h-80 wrapper offsetHeight === 320)
• Title and x-axis labels visible simultaneously — passed ("Usage by day" heading + day labels 1–30 both in viewport)
• Tasks section visible below chart — passed (heading + table visible without scrolling)
• Chart SVG renders correctly — passed (35 text elements: 5 y-axis + 30 x-axis labels)

Regression Verification

Temporarily reverted the fix to confirm the bug:

• Without fix: chart height = 745px (fills viewport)
• With fix: chart height = 320px (constrained)

Before (broken)	After (fixed)

CI: 35 passed, 0 failed. Typecheck passed.

Devin session