From d05727779bda5e159f0b61d34c5187d0b5516d57 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Thu, 30 Jul 2026 18:17:10 +0200
Subject: [PATCH] =?UTF-8?q?Web:=20Ring-Karten=20=E2=80=93=20Legende=20in?=
 =?UTF-8?q?=20eigenem=20Scroll-Bereich=20(Ring=20bleibt=20stehen)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

align-self:stretch an der <ul> war zu unzuverlaessig (u.a. wegen flex-wrap). Jetzt
kanonisches Muster: Ring (feste Groesse, mittig) + eigener .chart-legend-scroll
(flex:1 1 0; min-height:0; overflow-y:auto) in einem align-items:stretch-Container
ohne Umbruch. Nur die Legende scrollt, der Ring bleibt stehen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/dashboard/charts/Donut.jsx | 29 ++++++++++++++++-------------
 web/src/styles.css                 | 18 +++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/web/src/dashboard/charts/Donut.jsx b/web/src/dashboard/charts/Donut.jsx
index 3ce4696..30aadd2 100644
--- a/web/src/dashboard/charts/Donut.jsx
+++ b/web/src/dashboard/charts/Donut.jsx
@@ -65,19 +65,22 @@ export default function Donut({ segmente = [], gesamtLabel = "gesamt", einheit =
         </text>
       </svg>
 
-      <ul className="chart-legend">
-        {boegen.map((b) => (
-          <li key={b.name}
-            onMouseEnter={() => setAktiv(b)}
-            onMouseLeave={() => setAktiv(null)}>
-            <span className="swatch" style={{ background: b.color }} />
-            <span className="legend-name">{b.name}</span>
-            <span className="legend-value">
-              {fmt(b.value)} · {Math.round(b.anteil * 100)} %
-            </span>
-          </li>
-        ))}
-      </ul>
+      {/* Eigener Scroll-Bereich: nur die Legende scrollt, der Ring bleibt stehen. */}
+      <div className="chart-legend-scroll">
+        <ul className="chart-legend">
+          {boegen.map((b) => (
+            <li key={b.name}
+              onMouseEnter={() => setAktiv(b)}
+              onMouseLeave={() => setAktiv(null)}>
+              <span className="swatch" style={{ background: b.color }} />
+              <span className="legend-name">{b.name}</span>
+              <span className="legend-value">
+                {fmt(b.value)} · {Math.round(b.anteil * 100)} %
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }
diff --git a/web/src/styles.css b/web/src/styles.css
index 8508125..6b401e1 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -777,21 +777,21 @@ select.zeitraum:hover { color: var(--text); }
 /* ---------- Diagramme ---------- */
 /* Der Ring fuellt die Karte und sitzt mittig – vorher klebte er oben und
    darunter blieb eine grosse leere Flaeche stehen. */
+/* Ring links (feste Größe, mittig) + eigener Scroll-Bereich rechts für die
+   Legende. Der Ring-Bereich füllt die feste Kartenhöhe; nur die Legende scrollt,
+   nicht die ganze Karte. */
 .chart-donut {
-  display: flex; align-items: center; justify-content: center;
-  gap: var(--sp-4); flex-wrap: wrap;
-  flex: 1; min-height: 0;
+  display: flex; align-items: stretch; justify-content: center;
+  gap: var(--sp-4);
+  flex: 1; min-height: 0; overflow: hidden;
 }
-/* Bei vielen Kategorien (Detailansicht) soll der Ring stehen bleiben und nur die
-   Legende scrollen – nicht die ganze Karte. Deshalb füllt die Legende die Höhe
-   des Ring-Bereichs und scrollt in sich; der Ring bleibt mittig fixiert. */
-.chart-donut .chart-legend { align-self: stretch; min-height: 0; overflow-y: auto; }
-.donut-svg { width: 160px; height: 160px; flex: 0 0 auto; }
+.chart-legend-scroll { flex: 1 1 0; min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; }
+.donut-svg { width: 160px; height: 160px; flex: 0 0 auto; align-self: center; }
 .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; }
 .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }
 .donut-label { font-size: 10px; fill: var(--muted); }
 
-.chart-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 140px; }
+.chart-legend { list-style: none; margin: 0; padding: 0; }
 .chart-legend li {
   display: flex; align-items: center; gap: var(--sp-2);
   padding: 3px 0; font-size: 0.82rem;