mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 04:32:42 +00:00
style(insights): widen health-score card so label list fits the ranking dot
Marc reported the German "Einnahmetreue" component label visibly
overlapping the band-coloured component-value pill at the right of
the row on `lg+` viewports. The card's `lg:w-[220px]` width left only
~64px for the label column after the progress bar (`flex-1`) and the
right-side value pill (`w-8`) consumed the rest — fine for short
labels like "BP" / "Mood" but cropped for the longer German strings.
Two coordinated changes:
- Card width: `lg:w-[220px]` → `lg:w-[260px]` (~18 % wider on `lg+`).
- Label column: `w-16` (64px) → `w-24` (96px) with a `truncate`
fallback for any future localisation that pushes the label past
96px.
Net result: the label column has ~50 % more pixel budget than before,
which puts "Einnahmetreue" comfortably inside its slot. The card's
internal grid (label / bar / value) preserves the same gap rhythm so
the visual proportions stay familiar.
This commit is contained in:
1 parent
60541803f2
commit
75cf0b60dc
1 file changed
+16
-2
@@ -89,7 +89,17 @@ export function HealthScoreCard({
|
||||
className={cn(
|
||||
"bg-card/65 rounded-xl border px-4 py-4 shadow-sm backdrop-blur-sm",
|
||||
BAND_BORDER_CLASS[band],
|
||||
"w-full lg:w-[220px] lg:shrink-0",
|
||||
// v1.4.25 W3 — Marc reported the German "Einnahmetreue" label
|
||||
// overlapping the band-coloured component-value pill at the
|
||||
// right of each row. The original `w-[220px]` left only ~64px
|
||||
// for the label column after the bar + value chip ate the
|
||||
// rest, which fits "Mood" / "BP" but truncates the longer
|
||||
// German strings. Bumped to `w-[260px]` so the card sits
|
||||
// ~18 % wider on `lg+` without disturbing the title block's
|
||||
// visual centre of gravity; the label column is widened in
|
||||
// step with this so the breathing room actually lands on the
|
||||
// text.
|
||||
"w-full lg:w-[260px] lg:shrink-0",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
@@ -189,7 +199,11 @@ export function HealthScoreCard({
|
||||
data-component={key}
|
||||
className="flex items-center gap-2 text-[11px]"
|
||||
>
|
||||
<span className="text-muted-foreground w-16 shrink-0">
|
||||
{/* v1.4.25 W3 — widened label column from w-16 (64px) to
|
||||
w-24 (96px) so the longest German label
|
||||
("Einnahmetreue" — 13 chars at 11px) sits inside the
|
||||
column without spilling into the bar/value chip. */}
|
||||
<span className="text-muted-foreground w-24 shrink-0 truncate">
|
||||
{label}
|
||||
</span>
|
||||
<div
|
||||
|
||||
Reference in new issue
Block a user