Web: Ring-Karten – Legende in eigenem Scroll-Bereich (Ring bleibt stehen)

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

@@ -65,19 +65,22 @@ export default function Donut({ segmente = [], gesamtLabel = "gesamt", einheit =
         </text>
       </svg>
 
-      <ul className="chart-legend">
+      {/* Eigener Scroll-Bereich: nur die Legende scrollt, der Ring bleibt stehen. */}
-        {boegen.map((b) => (
+      <div className="chart-legend-scroll">
-          <li key={b.name}
+        <ul className="chart-legend">
-            onMouseEnter={() => setAktiv(b)}
+          {boegen.map((b) => (
-            onMouseLeave={() => setAktiv(null)}>
+            <li key={b.name}
-            <span className="swatch" style={{ background: b.color }} />
+              onMouseEnter={() => setAktiv(b)}
-            <span className="legend-name">{b.name}</span>
+              onMouseLeave={() => setAktiv(null)}>
-            <span className="legend-value">
+              <span className="swatch" style={{ background: b.color }} />
-              {fmt(b.value)} · {Math.round(b.anteil * 100)} %
+              <span className="legend-name">{b.name}</span>
-            </span>
+              <span className="legend-value">
-          </li>
+                {fmt(b.value)} · {Math.round(b.anteil * 100)} %
-        ))}
+              </span>
-      </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }

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;
+  display: flex; align-items: stretch; justify-content: center;
-  gap: var(--sp-4); flex-wrap: wrap;
+  gap: var(--sp-4);
-  flex: 1; min-height: 0;
+  flex: 1; min-height: 0; overflow: hidden;
 }
-/* Bei vielen Kategorien (Detailansicht) soll der Ring stehen bleiben und nur die
+.chart-legend-scroll { flex: 1 1 0; min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; }
-   Legende scrollen – nicht die ganze Karte. Deshalb füllt die Legende die Höhe
+.donut-svg { width: 160px; height: 160px; flex: 0 0 auto; align-self: center; }
-   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; }
 .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;