From 42945efa04ed435082151a593bd5d4e2a4951fa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 4 Jun 2026 16:35:48 +0200
Subject: [PATCH] fix(insights): stop clipping long wellness-score ring labels

The wellness-score ring tiles passed the metric title into the ScoreRing
as an in-SVG centred <tspan>. A long localised title (Schlaf-Score,
Bereitschaft) was wider than the small ring's clear centre, and because
the text is SVG-centred inside the recharts overflow:hidden svg the leading
glyph was clipped (the missing leading "S" on Schlaf-Score). Render the
title as an HTML caption below the ring instead, where it wraps within the
tile and never truncates; the ring keeps just the number centred. The
in-SVG label slot stays for the anatomy detail view, which only ever passes
the short "/100" string.
---
 .../insights/derived/wellness-scores.tsx       | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/insights/derived/wellness-scores.tsx b/src/components/insights/derived/wellness-scores.tsx
index c39c9d75b..d7b6d42d1 100644
--- a/src/components/insights/derived/wellness-scores.tsx
+++ b/src/components/insights/derived/wellness-scores.tsx
@@ -59,11 +59,23 @@ function RingTile({
       data-metric={metricSlot}
       className="bg-card border-border hover:border-foreground/20 focus-visible:ring-ring flex items-center justify-center rounded-xl border p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none"
     >
-      <div className="flex flex-col items-center gap-1.5">
-        <ScoreRing score={score} band={band} size="sm" label={label} />
+      <div className="flex min-w-0 flex-col items-center gap-1.5">
+        {/* The metric title rides an HTML caption below the ring, not the
+            in-SVG `label` slot: a long localised title ("Schlaf-Score",
+            "Bereitschaft") overflowed the small ring's centred SVG text and
+            the recharts `overflow:hidden` clipped its leading glyph. As HTML
+            it wraps within the tile and never truncates. The ring keeps just
+            the number centred. */}
+        <ScoreRing score={score} band={band} size="sm" />
+        <span
+          data-slot="wellness-score-label"
+          className="text-foreground max-w-full text-center text-xs font-medium text-balance"
+        >
+          {label}
+        </span>
         <span
           data-slot="wellness-score-band-word"
-          className="text-muted-foreground text-xs font-medium"
+          className="text-muted-foreground text-center text-xs"
         >
           {bandWord}
         </span>