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:
parent
4580a197dd
commit
2ea0cfec96
@ -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}
|
||||
>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user