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
34 lines
897 B
JSON
34 lines
897 B
JSON
{
|
|
"name": "hivegrid-dashboard",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"description": "HiveGrid Analytics Dashboard - UI/UX Prototyp (SHK/Handwerk) zur Uebergabe an die Entwicklung",
|
|
"scripts": {
|
|
"dev": "next dev -p 4300",
|
|
"build": "next build",
|
|
"start": "next start -p 4300",
|
|
"lint": "eslint",
|
|
"verify:carbon": "node scripts/verify-carbon.mjs",
|
|
"verify:layout": "node scripts/verify-layout.mjs"
|
|
},
|
|
"dependencies": {
|
|
"@subframe/core": "^1.155.0",
|
|
"clsx": "^2.1.1",
|
|
"next": "16.2.6",
|
|
"react": "19.2.4",
|
|
"react-dom": "19.2.4",
|
|
"recharts": "^2.15.4"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "^4",
|
|
"@types/node": "^20",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "16.2.6",
|
|
"playwright-core": "^1.57.0",
|
|
"tailwindcss": "^4",
|
|
"typescript": "^5"
|
|
}
|
|
}
|