From 778d3b67460e12bb00499ba3701b4858b5686fbd Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Thu, 14 May 2026 00:57:18 +0200
Subject: [PATCH] =?UTF-8?q?fix(mail):=20legend=20vertikal=20zentral=20gege?=
 =?UTF-8?q?n=C3=BCber=20donut-center-number?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/mail/MailDistributionChart.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/rebreak-native/components/mail/MailDistributionChart.tsx b/apps/rebreak-native/components/mail/MailDistributionChart.tsx
index 8b93a68..911d117 100644
--- a/apps/rebreak-native/components/mail/MailDistributionChart.tsx
+++ b/apps/rebreak-native/components/mail/MailDistributionChart.tsx
@@ -106,12 +106,19 @@ export function MailDistributionChart({ data, hero, totalBlocked, isLegend }: Pr
             gap: 20,
           }}
         >
-          <HalfDonut
-            segments={segments}
-            centerValue={centerValue}
-            centerLabel={centerLabel}
-            width={DONUT_WIDTH}
-          />
+          {/* Donut-Box ist visuell asymmetrisch (Bogen oben, Center-Number bei
+              ~70% der Box-Höhe). Negativer marginBottom zieht die effektive
+              Box hoch sodass alignItems:center die Legend gegenüber der
+              visuellen Donut-Mitte (Center-Number) zentriert statt gegen die
+              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 }}>
             {slices.map((slice) => (
               <LegendRow key={slice.label} slice={slice} colors={colors} />