Usage chart height constrained to 320px
The usage chart in the webapp settings no longer expands to fill the entire screen height, fixing a recent layout regression.
The "Usage by day" chart on the usage settings page was expanding to take up 100% of the viewport height. This visual bug forced users to scroll significantly to navigate past the chart on larger screens. The chart layout is now constrained to a fixed 320-pixel height. This fix restores the expected dimensions, keeping the chart compact within the webapp settings.
View Original GitHub Description
✅ 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