fix(layout): kollidierenden und überlaufenden Text beseitigen
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
This commit is contained in:
1 parent
0875ae2688
commit
351a26efa4
10 files changed
+232
-23
No files matched your search
@@ -50,6 +50,7 @@ ui/ Subframe-Komponentenbibliothek (unverändert über
|
||||
docs/ Design-System, KPI-Katalog, Navigation, Datenmodell,
|
||||
Herkunft, Zielsystem, Leitplanken, Prüffragen
|
||||
scripts/verify-carbon.mjs gleicht chartTheme.ts gegen die Carbon-Referenz ab
|
||||
scripts/verify-layout.mjs misst Textkollisionen über alle Seiten und Breiten
|
||||
```
|
||||
|
||||
**Wichtigste Dateien für den Einbau:** `features/dashboard/data/calculations.ts`
|
||||
@@ -90,8 +91,13 @@ schnellste Weg, sich zu orientieren.
|
||||
|
||||
```bash
|
||||
npm run verify:carbon # Palette, neutrale Werte, Tooltip, Achsenraster gegen IBM Carbon
|
||||
npm run verify:layout # kollidierender oder überlaufender Text, 6 Seiten × 7 Fensterbreiten
|
||||
```
|
||||
|
||||
`verify:layout` braucht den laufenden Dev-Server. Es misst jede Textzeile im
|
||||
Browser, weil Layoutfehler nur in bestimmten Fensterbreiten auftreten und auf
|
||||
einem Screenshot deshalb unsichtbar bleiben.
|
||||
|
||||
Die Referenzwerte stehen mit Quelle und Version in
|
||||
[`docs/carbon-referenz.json`](docs/carbon-referenz.json), gezogen aus dem
|
||||
ausgelieferten Stylesheet von `@carbon/charts` — nicht aus der Dokumentation,
|
||||
|
||||
Reference in new issue
Block a user