From 6c391e04a3f555948388063ccedfd7880cb8bf05 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Wed, 16 Sep 2026 15:36:50 +0200
Subject: [PATCH] fix(dashboard): month bars render with definite-height parent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/dashboard/month-bars.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/month-bars.tsx b/src/components/dashboard/month-bars.tsx
index 764e17d..685d05f 100644
--- a/src/components/dashboard/month-bars.tsx
+++ b/src/components/dashboard/month-bars.tsx
@@ -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>
         ))}