mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 04:32:42 +00:00
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:
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>
|
||||
|
||||
Reference in new issue
Block a user