From ab79c711ade1221e06f7d1d391597e68bef160ce Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 31 Aug 2026 17:38:57 +0200 Subject: [PATCH] Karten einer Zeile gleich hoch, Ueberschuss mittig verteilen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Aus dem Sparring: Bei duenner Datenlage riss die oben buendige Ausrichtung Loecher in die Seite. Nachgemessen auf /analytics mit Zeitraum "heute" und Gewerk "Heizung": "Umsatz nach Gewerk" 112 px neben "Zahlungseingang im Zeitverlauf" 427 px — 315 px Seitenhintergrund dazwischen. Das liest sich nicht als "wenig Daten", sondern als "etwas ist kaputt". Zwei Aenderungen, beide klein: - Der Kartenkoerper zentriert seinen Inhalt senkrecht. Der Ueberschuss geht je zur Haelfte nach oben und unten, statt unten abgeladen zu werden. Eine Stelle in ChartCard und eine in WidgetKachel — nicht in fuenf Diagrammen. - items-start faellt auf den Zeilen, die ausschliesslich Diagrammkarten tragen. Die Zeile mit den beiden Tabellen auf der Kundenseite bleibt oben buendig: Eine Tabelle hat ein natuerliches Ende und eine eigene Blaetterleiste, Strecken schiebt die nur nach unten. Die Karten bleiben dynamisch — keine feste Hoehe, mehr Inhalt laesst die Karte und mit ihr die Zeile weiter wachsen. Die Leere verschwindet nicht, sie zieht aus dem Seitenhintergrund in die Karte. Das ist der Unterschied zwischen einem Raster mit Luecken und einer Karte, in der gerade wenig steht. Nachgemessen nach der Aenderung: 427/427, 389/389 auf /analytics, 372/372 und 423/423 auf /dashboard. Dabei ist nebenbei die Leerflaeche unter dem Vertriebstrichter verschwunden, die vorher auffiel. In DESIGN-SYSTEM.md als Regel festgehalten. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX --- docs/DESIGN-SYSTEM.md | 27 +++++++++++++++++++ .../dashboard/components/cards/ChartCard.tsx | 7 ++++- .../components/dashboard/WidgetKachel.tsx | 7 ++++- features/dashboard/pages/AuftraegeSeite.tsx | 4 +-- features/dashboard/pages/FinanzenSeite.tsx | 2 +- features/dashboard/pages/KundenSeite.tsx | 4 +-- features/dashboard/pages/TeamSeite.tsx | 2 +- features/dashboard/pages/UebersichtSeite.tsx | 4 +-- 8 files changed, 47 insertions(+), 10 deletions(-) diff --git a/docs/DESIGN-SYSTEM.md b/docs/DESIGN-SYSTEM.md index d8b159e..35d58b4 100644 --- a/docs/DESIGN-SYSTEM.md +++ b/docs/DESIGN-SYSTEM.md @@ -327,3 +327,30 @@ auslösenden Knopf zurück. (5,15:1 auf Weiß), nicht auf `neutral-600` (3,68:1 — unter WCAG AA). Das entspricht dem a11y-Override im Zielsystem. `text-neutral-subtle` ist ein Placeholder-Token und für lesbaren Text nicht geeignet. + +--- + +## Kartenhöhen in einer Zeile + +Karten einer Zeile sind **gleich hoch, aber nicht gleich voll**. Die Höhe gibt +die inhaltsreichste Karte vor; die übrigen strecken sich mit und verteilen den +Überschuss oben und unten je zur Hälfte (`justify-center` im Kartenkörper). + +Vorher waren die Zeilen oben bündig (`items-start`), und jede Karte endete dort, +wo ihr Inhalt endete. Bei ähnlich vollen Karten fiel das nicht auf. Bei dünner +Datenlage schon: Ein Balkendiagramm mit einer einzigen Kategorie war 112 px +hoch und stand neben einem Zeitverlauf mit 427 px — 315 px Seitenhintergrund +als Loch dazwischen. Das liest sich nicht als „wenig Daten", sondern als +„etwas ist kaputt". + +Die Leere verschwindet dadurch nicht — sie zieht aus dem Seitenhintergrund in +die Karte. Das ist der Unterschied zwischen einem Raster mit Lücken und einer +Karte, in der gerade wenig steht. + +**Die Karten bleiben dabei dynamisch.** Es gibt keine feste Höhe: Kommt mehr +Inhalt hinein, wächst die Karte und mit ihr die ganze Zeile. + +**Ausnahme: Zeilen mit Tabellen.** Eine Tabelle hat ein natürliches Ende und +eine eigene Fußzeile zum Blättern. Sie zu strecken schiebt nur die Blätterleiste +nach unten. Solche Zeilen bleiben oben bündig — im Prototyp die +Reaktivierungs- und Zahlungsmoral-Tabellen auf der Kundenseite. diff --git a/features/dashboard/components/cards/ChartCard.tsx b/features/dashboard/components/cards/ChartCard.tsx index e0875e6..3080bf8 100644 --- a/features/dashboard/components/cards/ChartCard.tsx +++ b/features/dashboard/components/cards/ChartCard.tsx @@ -138,7 +138,12 @@ export function ChartCard({ {legende ?
{legende}
: null} -
{children}
+ {/* justify-center: Karten einer Zeile sind gleich hoch, aber nicht gleich + voll. Eine Karte mit einem Balken neben einer mit einem Diagramm über + 400 px bekommt den Überschuss oben und unten je zur Hälfte, statt ihn + unten abzuladen. Der Inhalt behält seine natürliche Höhe — die Karte + wächst weiter mit, wenn mehr hineinkommt. */} +
{children}
); } diff --git a/features/dashboard/components/dashboard/WidgetKachel.tsx b/features/dashboard/components/dashboard/WidgetKachel.tsx index 391afa6..eb1fcac 100644 --- a/features/dashboard/components/dashboard/WidgetKachel.tsx +++ b/features/dashboard/components/dashboard/WidgetKachel.tsx @@ -109,7 +109,12 @@ export function WidgetKachel({ -
{children}
+ {/* justify-center: Karten einer Zeile sind gleich hoch, aber nicht gleich + voll. Eine Karte mit einem Balken neben einer mit einem Diagramm über + 400 px bekommt den Überschuss oben und unten je zur Hälfte, statt ihn + unten abzuladen. Der Inhalt behält seine natürliche Höhe — die Karte + wächst weiter mit, wenn mehr hineinkommt. */} +
{children}
{absprung ? (