Harlekin/AfiS-Aktensystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Abstand zur Beschriftung folgt aus der Polsterung des Feldes

Browse Source 
„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 <noreply@anthropic.com>
This commit is contained in:
Harlekin
2026-09-03 20:28:42 +02:00
co-authored by Claude Opus 5
parent 1d637bc85e
commit d867bc9b19
13 changed files with 154 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/globals.css
+45
View File
@@ -337,6 +337,51 @@
cursor: not-allowed;
}
/* -------------------------------------------------------------------
Beschriftung und Bedienelement.
Der Abstand dazwischen war kleiner als die Polsterung **innerhalb** des
Feldes, und genau daran erkennt das Auge einen zu engen Satz: das Wort
steht naeher am Rahmen als der Inhalt des Rahmens an demselben Rahmen,
also wirkt es angeklebt. Die Regel daraus: **der Abstand nach aussen ist
groesser als die Polsterung nach innen.**
Deshalb stehen beide Werte hier und nicht an den Aufrufstellen. Sie waren
dort ein Dutzend Mal von Hand gesetzt, mit drei verschiedenen Werten, und
keiner davon reichte. Siehe docs/10-design-system.md.
------------------------------------------------------------------- */
.field-label {
display: block;
/* Mehr als die 0.4rem Polsterung des Feldes nach oben und unten. */
margin-block-end: 0.5rem;
font-family: var(--font-condensed);
font-size: var(--text-2xs);
line-height: 1.4;
color: var(--color-text-dim);
}
/* Beschriftung daneben statt darueber. Waagerecht braucht es mehr Luft als
senkrecht: das Feld polstert innen 0.7rem, aussen sind es 0.85rem. */
.field-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
font-family: var(--font-condensed);
font-size: var(--text-2xs);
color: var(--color-text-dim);
}
/* Der Hinweis unter einem Feld gehoert naeher an das Feld als an das
naechste. */
.field-hint {
display: block;
margin-block-start: 0.4rem;
font-size: var(--text-2xs);
line-height: 1.45;
color: var(--color-text-dim);
}
/* Einzeilige Felder, die wie ein Knopf aussehen duerfen: Suchbalken,
Schnellfilter. */
.field-pill {