From 2f6c88ce088eb86e772d6fa1489d688bcffcc16e Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Thu, 30 Jul 2026 17:47:46 +0200
Subject: [PATCH] =?UTF-8?q?Web:=20Anteils-Ringe=20=E2=80=93=20Ring=20bleib?=
 =?UTF-8?q?t=20stehen,=20nur=20Legende=20scrollt;=20Ohne-MHD-Schalter=20in?=
 =?UTF-8?q?=20die=20Konfig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bei vielen Kategorien scrollte die ganze Karte (Ring wanderte weg). Jetzt fuellt
die Legende die Hoehe des Ring-Bereichs und scrollt in sich; der Ring bleibt
mittig fixiert.

Ablauf-Anteile: der Ohne-MHD-Schalter sass als Checkbox auf der Karte (localStorage).
Jetzt als boolean-Konfig im Zahnrad-Dialog (Vorgabe an), wie die anderen Optionen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/dashboard/cards.jsx | 24 +++++-------------------
 web/src/styles.css          | 11 ++++-------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx
index 9f5423d..b952a5f 100644
--- a/web/src/dashboard/cards.jsx
+++ b/web/src/dashboard/cards.jsx
@@ -428,16 +428,10 @@ function KarteBewegungen() {
 }
 
 // ---------------------------------------------------------------- Diagramme
-function KarteAblaufRing() {
+function KarteAblaufRing({ props: karteProps }) {
   const { daten, fehler } = useDaten(() => api.dashboardExpirySplit());
-  // Ob „Ohne MHD" (Gegenstände/undatierte Chargen) mitgezählt wird – gemerkt.
-  const [mitOhneMhd, setMitOhneMhd] = useState(
-    () => localStorage.getItem("ablauf_mit_ohne_mhd") !== "0",
-  );
-  function umschalten(on) {
-    setMitOhneMhd(on);
-    localStorage.setItem("ablauf_mit_ohne_mhd", on ? "1" : "0");
-  }
+  // Ob „Ohne MHD" (Gegenstände/undatierte Chargen) mitgezählt wird – Karten-Einstellung.
+  const mitOhneMhd = karteProps?.mit_ohne_mhd ?? true;
   if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
   if (!daten) return <div className="empty">Lädt…</div>;
 
@@ -450,16 +444,7 @@ function KarteAblaufRing() {
   if (mitOhneMhd) {
     segmente.push({ name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") });
   }
-  return (
-    <div className="ring-mit-schalter">
-      <label className="check-inline ring-schalter">
-        <input type="checkbox" checked={mitOhneMhd}
-          onChange={(e) => umschalten(e.target.checked)} />
-        <span>„Ohne MHD" einbeziehen</span>
-      </label>
-      <Donut segmente={segmente} gesamtLabel="Einheiten" />
-    </div>
-  );
+  return <Donut segmente={segmente} gesamtLabel="Einheiten" />;
 }
 
 function KarteKategorienRing({ props: karteProps }) {
@@ -685,6 +670,7 @@ export const KARTEN = {
     titel: "Ablauf-Anteile", icon: "clock", vorschau: "ring",
     beschreibung: "Ring: in Ordnung, bald ablaufend, abgelaufen",
     standard: { w: 4, h: 6 }, min: { w: 3, h: 5 },
+    config: [{ key: "mit_ohne_mhd", type: "boolean", label: "„Ohne MHD“ einbeziehen", default: true }],
     komponente: KarteAblaufRing,
   },
   "category-donut": {
diff --git a/web/src/styles.css b/web/src/styles.css
index 9f13fa5..aa84a34 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -778,13 +778,10 @@ select.zeitraum:hover { color: var(--text); }
   gap: var(--sp-4); flex-wrap: wrap;
   flex: 1; min-height: 0;
 }
-/* Ablauf-Ring mit „Ohne MHD"-Umschalter darueber; der Ring fuellt den Rest. */
-.ring-mit-schalter { display: flex; flex-direction: column; flex: 1; min-height: 0; }
-.ring-schalter { flex: 0 0 auto; justify-content: flex-end; margin: 0 0 4px; font-size: 0.78rem; color: var(--muted); }
-/* Der Umschalter ist eine Karten-Einstellung: nur sichtbar, wenn man das
-   Dashboard gerade bearbeitet. Die Wahl wirkt trotzdem in der normalen Ansicht. */
-.ring-mit-schalter .ring-schalter { display: none; }
-.dash-grid.editing .ring-mit-schalter .ring-schalter { display: flex; }
+/* 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; }
 .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; }
 .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }