chahine/rebreak-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(mail): legend vertikal zentral gegenüber donut-center-number

Browse Source 
Donut-Box ist asymmetrisch: SVG-Höhe 118px, aber Center-Number sitzt bei
y≈81 (Bogen oben, Number unten-mitte). alignItems:center zentriert die
Legend gegen die SVG-Box-Mitte (y=59) — visuell zu hoch, weil die echte
Donut-Mitte unten liegt.

Fix: marginBottom:-28 am Donut-Wrapper. Reduziert die effektive Box-Höhe
von 118 auf 90px → alignItems:center positioniert Legend dann gegen die
visuelle Donut-Mitte statt der Bounding-Box-Mitte. Donut-Bogen overflows
sichtbar nach unten (kein Clipping).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-14 00:57:18 +02:00
parent 55cba9a3fe
commit 778d3b6746
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/rebreak-native/components/mail/MailDistributionChart.tsx
View File

@ -106,12 +106,19 @@ export function MailDistributionChart({ data, hero, totalBlocked, isLegend }: Pr
gap: 20, gap: 20,
}} }}
> >
<HalfDonut {/* Donut-Box ist visuell asymmetrisch (Bogen oben, Center-Number bei
segments={segments} ~70% der Box-Höhe). Negativer marginBottom zieht die effektive
centerValue={centerValue} Box hoch sodass alignItems:center die Legend gegenüber der
centerLabel={centerLabel} visuellen Donut-Mitte (Center-Number) zentriert statt gegen die
width={DONUT_WIDTH} SVG-Bounding-Box-Mitte. */}
/> <View style={{ marginBottom: -28 }}>
<HalfDonut
segments={segments}
centerValue={centerValue}
centerLabel={centerLabel}
width={DONUT_WIDTH}
/>
</View>
<View style={{ gap: 6, flex: 1, minWidth: 0 }}> <View style={{ gap: 6, flex: 1, minWidth: 0 }}>
{slices.map((slice) => ( {slices.map((slice) => (
<LegendRow key={slice.label} slice={slice} colors={colors} /> <LegendRow key={slice.label} slice={slice} colors={colors} />