peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(stats): keep daily usage bars always visible

Browse source 
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
1 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/components/Stats.tsx
View file

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