dejanandClaude Opus 5
351a26efa4
Gemeldeter Fehler: In der Ringlegende klebten Bezeichnung und Wert aneinander
("Gestellt189,1 T€"). Ursache war eine eigene Regression — beim Beheben der
abgeschnittenen Legendennamen war das truncate entfallen, ohne Ersatz. Damit
schrumpft die Namensspalte durch min-w-0 + grow auf null Breite, und der Text
läuft sichtbar über seinen Kasten hinaus:
1280 px Kastenbreite 0 px, Text 43 px darüber hinaus
1440 px Kastenbreite 25 px, Text 18 px darüber hinaus
1600 px unauffällig
Genau deshalb war es auf den Screenshots nicht zu sehen: Der Fehler tritt nur in
bestimmten Fensterbreiten auf.
Neu: scripts/verify-layout.mjs + npm run verify:layout. Lädt alle sechs Seiten in
sieben Breiten (1024–1920) und misst jede Textzeile über Range.getClientRects.
Gemessen wird auf Textzeilen, nicht auf Elementkästen — sonst melden benachbarte
Tabellenzellen mit Innenabstand falsch positiv. Mindestabstand 8 px = Carbon
$spacing-03. Der Lauf fand 110 Fehler; alle behoben:
- Ringlegende: Container-Query statt fester Zweispaltigkeit. Legende sitzt rechts
vom Ring, wenn Platz ist, sonst darunter — Carbon: "positioned to the right of
the chart when space is plentiful". Namen brechen um statt überzulaufen.
- Auslastungs-Achse: Beschriftungsdichte staffelt sich über drei Container-Stufen,
vorher überlappten die Zahlen in schmalen Karten um bis zu 16 px.
- Handlungsbedarf und Kennzahl-Labels: break-words statt Überlauf.
- Kartentitel und -untertitel: break-words, weil Dateipfade keine Leerzeichen
zum Umbrechen haben.
Dokumentiert als DESIGN-SYSTEM.md §9 mit Begründung, warum das ein gemessener
Prüfer sein muss und keine Sichtprüfung.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
/**
|
|
* Kompakte Zusatzkennzahlen unter einem Chart —
|
|
* beantwortet "und was heißt das jetzt?" ohne eigene Karte.
|
|
*/
|
|
export function StatZeile({
|
|
eintraege,
|
|
/**
|
|
* Spalten auf breiten Schirmen. In einer Drittelkarte brechen vier Spalten
|
|
* mitten im Betrag um ("1,22 Mio." / "€") — dort gehoeren zwei hin.
|
|
*/
|
|
spalten = 4,
|
|
}: {
|
|
eintraege: { label: string; wert: string; hinweis?: string }[];
|
|
spalten?: 2 | 3 | 4;
|
|
}) {
|
|
const raster = { 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4" }[spalten];
|
|
return (
|
|
<div
|
|
className={`grid grid-cols-2 gap-x-6 gap-y-3 border-t border-solid border-border-default pt-3 ${raster}`}
|
|
>
|
|
{eintraege.map((eintrag) => (
|
|
<div key={eintrag.label} className="flex flex-col gap-0.5">
|
|
<span className="break-words text-[11px] uppercase tracking-[0.06em] text-text-neutral-tertiary">
|
|
{eintrag.label}
|
|
</span>
|
|
<span className="text-[14px] font-semibold tabular-nums text-text-neutral-primary">
|
|
{eintrag.wert}
|
|
</span>
|
|
{eintrag.hinweis ? (
|
|
<span className="text-[11px] text-text-neutral-tertiary">{eintrag.hinweis}</span>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|