A trend chart that uses the whole card

19/08/2026

The Company costs trend chart drew at a fixed width and sat centred in its card, leaving a wide empty margin on larger screens. It now measures the space it has and fills it. On a phone, the six metric buttons were wrapping to three rows above the chart; they move into the same bottom sheet the date range already uses, with the metric currently plotted shown on the button.

Highlights

The chart fills its card - it was drawn at a fixed size and scaled to fit, so on a wide screen it stopped well short of the right edge with the remainder left blank. It now takes the width it is actually given, without stretching the line or the labels.
Fewer rows of buttons on a phone - picking which figure to plot took six buttons across three wrapped rows, above a chart that then had very little room left. They sit behind one button now, which shows the metric on screen, and open in a bottom sheet - the same control the date range uses just above.

Changes

Fixes

fix(company-costs): the trend chart sizes itself to its container instead of drawing at a fixed width and centring the result.
fix(company-costs): the metric picker collapses into a bottom sheet below the sm breakpoint, matching the date range control.