From d867bc9b19da858a44769ae4f57d68b6d777da15 Mon Sep 17 00:00:00 2001 From: Harlekin Date: Thu, 3 Sep 2026 20:28:42 +0200 Subject: [PATCH] Abstand zur Beschriftung folgt aus der Polsterung des Feldes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit „Zwischen der Auswahl und dem Text ist kaum Platz" — und das stimmte überall, nicht nur an der einen Stelle. Der Grund war messbar: der Abstand zur Beschriftung betrug 8 px, die Polsterung innerhalb des Feldes 11,2 px. Das Wort stand also näher am Rahmen als der Inhalt des Rahmens an demselben Rahmen, und genau daran erkennt das Auge einen zu engen Satz. Die Regel heisst jetzt: der Abstand nach aussen ist grösser als die Polsterung nach innen. Sie steht einmal in globals.css als .field-label, .field-row und .field-hint — vorher war sie ein Dutzend Mal als mt-1, mt-1.5 oder gap-2 an den Aufrufstellen verteilt, mit drei verschiedenen Werten, von denen keiner reichte. 33 Stellen umgestellt. Der Test prüft die Regel und nicht die Zahl: er liest die Polsterung von .field aus dem CSS und verlangt, dass beide Abstände darüber liegen. Gegengeprobt mit einem zu kleinen Wert, dann schlägt er an. Nachgemessen im Browser mit dem gebauten CSS: 8 px senkrecht gegen 5,6 px Innenpolsterung, 13,6 px waagerecht gegen 11,2 px. Co-Authored-By: Claude Opus 5 --- docs/10-design-system.md | 17 +++++++ docs/13-entscheidungen.md | 17 +++++++ .../abteilungen/[key]/DepartmentEntries.tsx | 10 ++--- .../admin/abteilungen/DepartmentForm.tsx | 20 ++++----- web/app/(app)/admin/protokoll/page.tsx | 24 +++++----- web/app/(app)/admin/rollen/RoleRow.tsx | 4 +- .../faelle/[caseNumber]/EntryComposer.tsx | 2 +- web/app/(app)/faelle/neu/NewCaseForm.tsx | 8 ++-- .../personalakten/[id]/PersonnelHead.tsx | 10 ++--- .../personalakten/neu/NewPersonnelForm.tsx | 16 +++---- web/app/globals.css | 45 +++++++++++++++++++ web/components/documents/NewDocument.tsx | 6 +-- web/tests/design-tokens.test.ts | 25 +++++++++++ 13 files changed, 154 insertions(+), 50 deletions(-) diff --git a/docs/10-design-system.md b/docs/10-design-system.md index 48c08ed..fb4ac91 100644 --- a/docs/10-design-system.md +++ b/docs/10-design-system.md @@ -87,6 +87,23 @@ Oberfläche nichts von selbst. Alle übrige Bewegung ist Antwort auf eine Handlung: Aufklappen, Bestätigen, Einfügen. Keine Einblend-Animationen beim Scrollen, keine Hover-Effekte auf jeder Fläche. +## Beschriftung und Bedienelement + +**Der Abstand nach aussen ist grösser als die Polsterung nach innen.** Eine Beschriftung, die +näher am Rahmen steht als der Inhalt des Rahmens an demselben Rahmen, wirkt angeklebt — daran +erkennt das Auge einen zu engen Satz, ohne dass man es benennen könnte. + +Daraus folgen die Zahlen, nicht umgekehrt: das Feld polstert innen 0,4 rem senkrecht und +0,7 rem waagerecht, also steht die Beschriftung 0,5 rem darüber (`.field-label`) oder +0,85 rem daneben (`.field-row`). Waagerecht braucht es mehr, weil das Auge senkrecht +Gestapeltes ohnehin als zusammengehörig liest. + +Beides steht **einmal** in `globals.css` und nicht an den Aufrufstellen. Vorher war es ein +Dutzend Mal von Hand gesetzt, mit drei verschiedenen Werten, und keiner reichte. Ein Test +prüft die Regel, nicht die Zahl: wer die Polsterung ändert, fällt dort auf. + +Ein Hinweis unter einem Feld (`.field-hint`) steht näher am Feld als am nächsten. + ## Knöpfe Jeder Knopf trägt Rahmen und eigene Grundfläche, auch der unscheinbarste. Ein Text, der sich diff --git a/docs/13-entscheidungen.md b/docs/13-entscheidungen.md index 9b688a6..479be25 100644 --- a/docs/13-entscheidungen.md +++ b/docs/13-entscheidungen.md @@ -1196,3 +1196,20 @@ sechs Stufenfarben sind das einzige Buntsystem der Anwendung und bedeuten dort e Bestimmtes; ein Tortenstück in Oxidrot würde als „streng geheim" gelesen. Daneben steht die Aufschlüsselung als Liste mit Zahlen und Prozenten: Farbe allein darf keine Angabe tragen, also ist das Diagramm der Schmuck und die Liste die Auskunft. + +### Der Abstand zur Beschriftung folgt aus der Polsterung des Feldes + +„Zwischen der Auswahl und dem Text ist kaum Platz" — und das stimmte überall, nicht nur an der +einen Stelle. Der Grund war messbar: der Abstand zur Beschriftung betrug 8 px, die Polsterung +**innerhalb** des Feldes 11,2 px. Das Wort stand also näher am Rahmen als der Inhalt des +Rahmens an demselben Rahmen, und genau daran erkennt das Auge einen zu engen Satz. + +Die Regel heisst deshalb: **der Abstand nach aussen ist grösser als die Polsterung nach +innen.** Sie steht einmal in `globals.css` als `.field-label`, `.field-row` und `.field-hint`, +statt wie vorher ein Dutzend Mal als `mt-1`, `mt-1.5` oder `gap-2` an den Aufrufstellen — mit +drei verschiedenen Werten, von denen keiner reichte. + +Der Test prüft die Regel und nicht die Zahl: er liest die Polsterung von `.field` aus dem CSS +und verlangt, dass Label-Abstand und Reihenabstand darüber liegen. Wer die Polsterung ändert, +fällt dort auf. Nachgemessen im Browser mit dem gebauten CSS: 8 px senkrecht gegen 5,6 px +Innenpolsterung, 13,6 px waagerecht gegen 11,2 px. diff --git a/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx b/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx index 308d488..18b99b8 100644 --- a/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx +++ b/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx @@ -95,19 +95,19 @@ export function DepartmentEntries({ {canWrite ? (