fix(mail): donut card layout from scratch — center, breathing room, no truncation

User-Feedback nach mehreren Iterationen: vorheriges Layout war kaputt
(Donut zu klein, Total links statt im Center, Legend mit "G.." truncated).
Frischer Ansatz:

- DONUT_WIDTH 180 → 200 (Center-Number-Math passt, sitzt sauber im Bogen-Hohlraum)
- Container: flex-row, alignItems center, justifyContent center, gap 20
- KEIN flexShrink/maxWidth am Legend-Wrapper mehr (war Ursache des Quetschens)
- Truncation nur am einzelnen Text-Element via maxWidth: 160 + numberOfLines: 1
  (statt am ganzen Wrapper) — schützt nur extrem lange Domains
- Donut + Legend nehmen ihre natural-width, Container zentriert beides

Plus i18n: "Blockiert — letzte 30 Tage" → "Blockiert" (DE+EN).
Das hardcoded 30 war falsch wenn die Connection nur 2 Tage Daten hat.
Echte Range-Info kommt schon aus dem Sublabel "N Mails blockiert · M letzte
Woche".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-14 00:33:39 +02:00
parent 4580a197dd
commit 2ea0cfec96
3 changed files with 12 additions and 5 deletions

View File

@ -98,14 +98,21 @@ export function MailDistributionChart({ data, hero, totalBlocked, isLegend }: Pr
paddingBottom: 12,
}}
>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 20,
}}
>
<HalfDonut
segments={segments}
centerValue={centerValue}
centerLabel={centerLabel}
width={DONUT_WIDTH}
/>
<View style={{ gap: 5 }}>
<View style={{ gap: 6 }}>
{slices.map((slice) => (
<LegendRow key={slice.label} slice={slice} colors={colors} />
))}
@ -163,10 +170,10 @@ function LegendRow({
/>
<Text
style={{
flex: 1,
fontSize: 12,
fontFamily: slice.isOther ? 'Nunito_400Regular' : 'Nunito_600SemiBold',
color: slice.isOther ? colors.textMuted : colors.text,
maxWidth: 160,
}}
numberOfLines={1}
>

View File

@ -455,7 +455,7 @@
"more_infos_title": "Mehr Infos",
"more_infos_subtitle": "Blockiert — letzte 30 Tage",
"stats": {
"blocked_per_day_heading": "Blockiert — letzte 30 Tage",
"blocked_per_day_heading": "Blockiert",
"blocked_per_day_sublabel": "%{total} Mails blockiert · %{avg} letzte Woche",
"blocked_per_week_heading": "Blockiert — letzte Wochen",
"blocked_per_month_heading": "Blockiert — letzte Monate",

View File

@ -455,7 +455,7 @@
"more_infos_title": "More Info",
"more_infos_subtitle": "Blocked — last 30 days",
"stats": {
"blocked_per_day_heading": "Blocked — last 30 days",
"blocked_per_day_heading": "Blocked",
"blocked_per_day_sublabel": "%{total} mails blocked · %{avg} last week",
"blocked_per_week_heading": "Blocked — recent weeks",
"blocked_per_month_heading": "Blocked — recent months",