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:
parent
c531abda45
commit
6c391e04a3
1 changed files with 18 additions and 7 deletions
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in a new issue