From e0590c2b6cfcf2c56fddeb55c9eb5f47fd66749d Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 17 Jun 2026 13:55:43 +0200
Subject: [PATCH] fix(stats): keep daily usage bars always visible

Each day now has a full-height track behind a solid accent fill, so low-usage
days no longer render as a near-invisible sliver that only stood out on hover.
---
 frontend/src/components/Stats.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Stats.tsx b/frontend/src/components/Stats.tsx
index f8dd9c3..46a776e 100644
--- a/frontend/src/components/Stats.tsx
+++ b/frontend/src/components/Stats.tsx
@@ -63,15 +63,21 @@ export default function Stats() {
             ) : (
               <div className="flex items-end gap-0.5 h-24">
                 {data.daily.map((d) => (
+                  // Each day gets a full-height track so the column is always visible
+                  // (even on near-zero days); the accent fill renders the value on top.
                   <div
                     key={d.day}
-                    className="flex-1 bg-accent/70 hover:bg-accent rounded-t transition"
-                    style={{ height: `${Math.max(2, (d.total / maxDaily) * 100)}%` }}
+                    className="flex-1 h-full flex items-end bg-card/50 rounded-t"
                     title={t("stats.dailyTooltip", {
                       day: d.day,
                       units: d.total.toLocaleString(),
                     })}
-                  />
+                  >
+                    <div
+                      className="w-full bg-accent hover:opacity-80 rounded-t transition"
+                      style={{ height: `${Math.max(3, (d.total / maxDaily) * 100)}%` }}
+                    />
+                  </div>
                 ))}
               </div>
             )}