fix(dashboard): month bars render with definite-height parent

The chart column was flex-1 inside h-40, but had no explicit height of
its own. The bar inside used height: X% which has nothing to compute
against when the parent is auto-sized — Tailwind's percent utilities
collapse to 0 without a definite parent.

Wrap the bar in a flex-1 container that consumes the remaining vertical
space. The percentage now resolves against that container's actual height,
so the 154h August bar fills three-quarters of the way up the column,
the 5h May bar barely peeks above the baseline, and the rest sit between.
This commit is contained in:
Dave 2026-09-16 15:36:50 +02:00
parent c531abda45
commit 6c391e04a3

View file

@ -22,16 +22,27 @@ export function MonthBars({ monthly }: { monthly: MonthlyEffort[] }) {
<div className="flex h-40 items-end gap-2">
{hours.map((month, index) => (
<div key={`${month.label}-${index}`} className="flex flex-1 flex-col items-center gap-1.5">
<div
key={`${month.label}-${index}`}
className="flex h-full flex-1 flex-col items-center"
>
<span className="tabular text-[11px] text-text-secondary">
{month.hours}h
</span>
<div
className="w-full rounded-t bg-brand"
style={{ height: `${Math.max(2, (month.hours / max) * 100)}%` }}
role="img"
aria-label={`${month.label}: about ${month.hours} estimated hours`}
/>
{/* flex-1 lets the bar area take the remaining vertical space; the
bar's percentage height is then relative to a definite parent
instead of an auto-sized column. */}
<div className="flex w-full flex-1 items-end">
<div
className="w-full rounded-t bg-brand"
style={{
height: `${Math.max(2, (month.hours / max) * 100)}%`,
minHeight: "2px",
}}
role="img"
aria-label={`${month.label}: about ${month.hours} estimated hours`}
/>
</div>
<span className="text-[11px] text-text-muted">{month.label}</span>
</div>
))}