From f12f664ce58ed5f18991ececfec547b55b64249e Mon Sep 17 00:00:00 2001
From: CCS Admin <martin.porwoll@complexcaresolutions.de>
Date: Tue, 24 Feb 2026 09:13:00 +0000
Subject: [PATCH] fix: prevent pie chart labels from being clipped

Move Fallgruppen names into a Legend below the chart instead of
inline labels that overflow the container. Reduce pie radius to
leave breathing room.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/DashboardPage.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 458a153..ce4644b 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -173,12 +173,12 @@ export function DashboardPage() {
                   <Pie
                     data={fallgruppenData}
                     cx="50%"
-                    cy="50%"
-                    innerRadius={60}
-                    outerRadius={100}
+                    cy="45%"
+                    innerRadius={50}
+                    outerRadius={85}
                     paddingAngle={3}
                     dataKey="value"
-                    label={({ name, value }) => `${name}: ${value}`}
+                    label={({ value }) => value}
                   >
                     {fallgruppenData.map((_, idx) => (
                       <Cell
@@ -195,6 +195,14 @@ export function DashboardPage() {
                       color: 'var(--popover-foreground)',
                     }}
                   />
+                  <Legend
+                    verticalAlign="bottom"
+                    iconType="circle"
+                    iconSize={10}
+                    formatter={(value: string) => (
+                      <span style={{ color: 'var(--foreground)', fontSize: '13px' }}>{value}</span>
+                    )}
+                  />
                 </PieChart>
               </ResponsiveContainer>
             </CardContent>