From 75cf0b60dc86a52820039429d35c06f0edd5aa7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 12:01:32 +0200
Subject: [PATCH] style(insights): widen health-score card so label list fits
 the ranking dot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/insights/health-score-card.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/insights/health-score-card.tsx b/src/components/insights/health-score-card.tsx
index 6a02e92a1..2af4c1ed3 100644
--- a/src/components/insights/health-score-card.tsx
+++ b/src/components/insights/health-score-card.tsx
@@ -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