mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 22:02:16 +00:00
fix(insights): bound the mood time-of-day chart height
The "mood by time of day" card spans the full overview width, unlike its distribution/weekday siblings which sit in a two-column grid. Sizing the chart wrapper with aspect-[3/2] derived the height off the full card width, so on a wide viewport the chart ballooned to roughly 800px tall and overflowed its card. Swap the aspect ratio for a fixed bounded height so the chart fits the card at the same size as the width-constrained sibling charts regardless of viewport. Chart internals and tokens are unchanged.
This commit is contained in:
1 parent
42945efa04
commit
b54b95dbc7
1 file changed
+6
-1
@@ -77,7 +77,12 @@ export function MoodTimeOfDayChart({
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="aspect-[3/2] min-h-[160px] w-full">
|
||||
{/* A fixed height, not `aspect-[3/2]`: this card spans the full overview
|
||||
width (its weekday/distribution siblings sit in a 2-col grid and are
|
||||
width-constrained), so an aspect ratio derived the height off the full
|
||||
card width and ballooned the chart to ~800px on a wide viewport. A
|
||||
bounded height keeps it the same size as the sibling charts. */}
|
||||
<div className="h-[220px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={data}
|
||||
|
||||
Reference in new issue
Block a user