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.
This commit is contained in:
npeter83 2026-06-17 13:55:43 +02:00
parent b96fe0caba
commit e0590c2b6c

View file

@ -63,15 +63,21 @@ export default function Stats() {
) : ( ) : (
<div className="flex items-end gap-0.5 h-24"> <div className="flex items-end gap-0.5 h-24">
{data.daily.map((d) => ( {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 <div
key={d.day} key={d.day}
className="flex-1 bg-accent/70 hover:bg-accent rounded-t transition" className="flex-1 h-full flex items-end bg-card/50 rounded-t"
style={{ height: `${Math.max(2, (d.total / maxDaily) * 100)}%` }}
title={t("stats.dailyTooltip", { title={t("stats.dailyTooltip", {
day: d.day, day: d.day,
units: d.total.toLocaleString(), 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> </div>
)} )}