From bada5db3444743acd131b6a5c88a8b656d90432c Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 31 Aug 2026 23:09:39 +0200 Subject: [PATCH] Menue nicht mehr abschneiden, Zeile teilt sich nach dem Ausblenden neu auf Zwei Fehler aus dem Sparring, beide an der Diagrammkarte. **Das Optionsmenue war abgeschnitten.** Die Karte trug `overflow-hidden`, das Menue klappt aus dem Kopf heraus, und der zweite Eintrag war nur zur Haelfte zu sehen. Das Beschneiden ist entfallen; die runden Ecken brauchen es nicht, weil Kopf und Koerper 16 px Innenabstand haben und nichts an der Kante anliegt. **Nach dem Ausblenden blieb eine Luecke.** Die Zeilen waren ein Raster mit festen Spalten. Blendet man eine Karte aus, gibt ChartCard `null` zurueck, die Spalte bleibt aber stehen und die Nachbarkarte behaelt ihre zwei Drittel. Neu ist `ChartReihe` in PageContainer.tsx: eine Flexzeile statt eines Rasters. Die verbliebenen Karten verteilen den Platz unter sich neu, ohne dass jemand mitzaehlen muesste, wie viele gerade sichtbar sind. Nachgemessen auf /analytics: Der Zahlungsverlauf geht von 574 px auf 1164 px, sobald die Nachbarkachel verschwindet. Zehn Zeilen auf allen fuenf Analyse-Seiten umgestellt. `gleichHoch` haelt die Unterscheidung aus dem letzten Sparring fest: gestreckt nur, wo die Karten dieselbe Bauart haben. Beim Umbau eine Regression gebaut und durch Nachmessen gefunden: Aus 885/443 wurde 664/664. `[&>*]:flex-1` erzeugt den Selektor `.zeile > *`, und der ist spezifischer als eine Klasse am Kind, also verlor `xl:flex-[2]`. Jetzt `xl:flex-[2]!`, mit dem Grund als Kommentar an der Komponente. Nachgemessen nach der Aenderung, alle Zeilen: 885/443 wo zwei zu eins gewollt ist, 389/389 und 409/409 und 595/595 wo gleiche Hoehe gewollt ist. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX --- .../dashboard/components/cards/ChartCard.tsx | 8 +++- .../components/layout/PageContainer.tsx | 47 +++++++++++++++++++ features/dashboard/pages/AuftraegeSeite.tsx | 12 ++--- features/dashboard/pages/FinanzenSeite.tsx | 14 +++--- features/dashboard/pages/KundenSeite.tsx | 16 +++---- features/dashboard/pages/TeamSeite.tsx | 6 +-- features/dashboard/pages/UebersichtSeite.tsx | 12 ++--- 7 files changed, 84 insertions(+), 31 deletions(-) diff --git a/features/dashboard/components/cards/ChartCard.tsx b/features/dashboard/components/cards/ChartCard.tsx index fd38ef0..fd15f1e 100644 --- a/features/dashboard/components/cards/ChartCard.tsx +++ b/features/dashboard/components/cards/ChartCard.tsx @@ -68,8 +68,14 @@ export function ChartCard({ if (!istSichtbar(id)) return null; return ( + /* Kein `overflow-hidden`: Das Optionsmenü klappt aus dem Kartenkopf heraus + und wurde an der Kartenkante abgeschnitten. Ein Menü, von dem man den + zweiten Eintrag nur zur Hälfte sieht, ist unbenutzbar. + + Die Kante braucht das Beschneiden auch nicht: Kopf und Körper haben + 16 px Innenabstand, es liegt nichts an den runden Ecken an. */
diff --git a/features/dashboard/components/layout/PageContainer.tsx b/features/dashboard/components/layout/PageContainer.tsx index 07a8c93..3a618ff 100644 --- a/features/dashboard/components/layout/PageContainer.tsx +++ b/features/dashboard/components/layout/PageContainer.tsx @@ -56,3 +56,50 @@ export function Raster({
{children}
); } + +/** + * Eine Zeile aus Diagrammkarten. + * + * Bewusst Flexbox und kein Raster. Karten lassen sich ueber das Menü + * ausblenden; `ChartCard` gibt dann `null` zurueck. In einem Raster mit festen + * Spalten bleibt an dieser Stelle eine Luecke stehen, und die Nachbarkarte + * behaelt ihre zwei Drittel. Im Flexbereich verteilen die verbliebenen Karten + * den Platz unter sich neu, ohne dass jemand mitzaehlen muesste, wie viele + * gerade sichtbar sind. + * + * `[&>*]:flex-1` gibt jeder Karte denselben Anteil und ist zugleich das + * Sicherheitsnetz: Ohne eigene Breitenangabe schrumpfte ein Flexkind auf seine + * Inhaltsbreite, und ein Diagramm mit `ResponsiveContainer` faellt dann in sich + * zusammen. + * + * Eine breitere Karte bekommt `xl:flex-[2]!` mit. Das Ausrufezeichen ist noetig + * und kein Reflex: `[&>*]:flex-1` erzeugt den Selektor `.zeile > *`, und der + * ist spezifischer als eine Klasse am Kind. Ohne `!` gewinnt die Zeilenregel, + * und aus zwei Dritteln zu einem Drittel wird die Haelfte zur Haelfte. Genau + * das ist beim Umbau hier passiert und wurde durch Nachmessen gefunden. + * + * `min-w-0` ist Pflicht: Ohne das nimmt ein Flexkind seine Inhaltsbreite als + * Untergrenze, und ein Diagramm mit langer Achsenbeschriftung drueckt die + * Zeile ueber den Rand. + */ +export function ChartReihe({ + /** Ab welcher Breite die Karten nebeneinander stehen. */ + umbruch = "xl", + /** + * Gleiche Hoehe fuer alle Karten der Zeile. Nur richtig, wenn sie dieselbe + * Bauart haben (zwei Listen, zwei Diagramme). Sonst oben buendig, + * siehe docs/DESIGN-SYSTEM.md, Abschnitt "Kartenhoehen in einer Zeile". + */ + gleichHoch = false, + children, +}: { + umbruch?: "lg" | "xl"; + gleichHoch?: boolean; + children: React.ReactNode; +}) { + const klassen = + umbruch === "lg" + ? `flex flex-col gap-4 lg:flex-row ${gleichHoch ? "lg:items-stretch" : "lg:items-start"} [&>*]:min-w-0 lg:[&>*]:flex-1` + : `flex flex-col gap-4 xl:flex-row ${gleichHoch ? "xl:items-stretch" : "xl:items-start"} [&>*]:min-w-0 xl:[&>*]:flex-1`; + return
{children}
; +} diff --git a/features/dashboard/pages/AuftraegeSeite.tsx b/features/dashboard/pages/AuftraegeSeite.tsx index b80ed6b..f9dedcc 100644 --- a/features/dashboard/pages/AuftraegeSeite.tsx +++ b/features/dashboard/pages/AuftraegeSeite.tsx @@ -1,7 +1,7 @@ "use client"; import React from "react"; -import { PageContainer, Raster } from "../components/layout/PageContainer"; +import { ChartReihe, PageContainer, Raster } from "../components/layout/PageContainer"; import { KPICard } from "../components/cards/KPICard"; import { ChartCard } from "../components/cards/ChartCard"; import { StatZeile } from "../components/cards/StatZeile"; @@ -142,12 +142,12 @@ export function AuftraegeSeite({ vm }: { vm: VMState }) { /> -
+ formatZahl(w)} hoehe={250} nurGanzzahlen /> }) { > formatZahl(w)} /> -
+ -
+ }) { ]} /> -
+ }) { /> -
+ }) { formatMitte={formatEuro} /> -
+ -
+ }) { /> -
+ }) { /> -
+ formatZahl(w)} hoehe={250} nurGanzzahlen /> @@ -156,9 +156,9 @@ export function KundenSeite({ vm }: { vm: VMState }) { mitteLabel="Kunden" /> -
+ -
+ }) { > -
+ -
+ }) { leerText="Keine Auffälligkeiten" /> -
+ diff --git a/features/dashboard/pages/TeamSeite.tsx b/features/dashboard/pages/TeamSeite.tsx index b6211db..b84f3ed 100644 --- a/features/dashboard/pages/TeamSeite.tsx +++ b/features/dashboard/pages/TeamSeite.tsx @@ -1,7 +1,7 @@ "use client"; import React from "react"; -import { PageContainer, Raster } from "../components/layout/PageContainer"; +import { ChartReihe, PageContainer, Raster } from "../components/layout/PageContainer"; import { KPICard } from "../components/cards/KPICard"; import { ChartCard } from "../components/cards/ChartCard"; import { AuslastungsBalken } from "../components/charts/AuslastungsBalken"; @@ -159,7 +159,7 @@ export function TeamSeite({ vm }: { vm: VMState }) { /> -
+ }) { mitteLabel="Stunden" /> -
+ }) { -
+ }) { einfarbig={false} /> -
+ -
+ }) { /> -
+