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>
         ))}