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.
This commit is contained in:
Marc-André Bombeck committed 2026-06-04 16:44:39 +02:00
1 parent 65b988c686
commit 42945efa04
1 file changed
+15 -3
@@ -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>