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 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.

web/app/(app)/personalakten/[id]/PersonnelHead.tsx

@@ -107,13 +107,13 @@ export function PersonnelHead({
       <div className="grid gap-4 sm:grid-cols-2">
         <Feld id="rank" label={personnelText.rank} defaultValue={file.rank} />
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {personnelText.department}
           </span>
           <select
             name="departmentId"
             defaultValue={file.departmentId ?? ''}
-            className="field mt-1.5 w-full"
+            className="field w-full"
           >
             <option value="">{personnelText.noDepartment}</option>
             {departments.map((abteilung) => (
@@ -140,10 +140,10 @@ export function PersonnelHead({
             </label>
           ))}
         </div>
-        <p className="mt-1 text-2xs text-text-dim">{personnelText.statusHint}</p>
+        <p className="field-hint">{personnelText.statusHint}</p>
       </fieldset>
       <div>
-        <label htmlFor="note" className="font-condensed text-2xs text-text-dim">
+        <label htmlFor="note" className="field-label">
           {personnelText.note}
         </label>
         <textarea
@@ -294,7 +294,7 @@ function Feld({
 }) {
   return (
     <div>
-      <label htmlFor={id} className="font-condensed text-2xs text-text-dim">
+      <label htmlFor={id} className="field-label">
         {label}
       </label>
       <input

web/app/(app)/personalakten/neu/NewPersonnelForm.tsx

@@ -35,7 +35,7 @@ export function NewPersonnelForm({
       <Feld id="displayName" label={personnelText.name} required minLength={2} />
 
       <div>
-        <label htmlFor="userId" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="userId" className="field-label">
           {personnelText.linkedAccount}
         </label>
         <select
@@ -56,10 +56,10 @@ export function NewPersonnelForm({
       <div className="grid gap-5 sm:grid-cols-2">
         <Feld id="rank" label={personnelText.rank} />
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {personnelText.department}
           </span>
-          <select name="departmentId" defaultValue="" className="field mt-1.5 w-full">
+          <select name="departmentId" defaultValue="" className="field w-full">
             <option value="">{personnelText.noDepartment}</option>
             {departments.map((abteilung) => (
               <option key={abteilung.id} value={abteilung.id}>
@@ -82,11 +82,11 @@ export function NewPersonnelForm({
             </label>
           ))}
         </div>
-        <p className="mt-1 text-2xs text-text-dim">{personnelText.statusHint}</p>
+        <p className="field-hint">{personnelText.statusHint}</p>
       </fieldset>
 
       <div>
-        <label htmlFor="note" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="note" className="field-label">
           {personnelText.note}
         </label>
         <textarea
@@ -95,11 +95,11 @@ export function NewPersonnelForm({
           rows={3}
           className="mt-1.5 block w-full field"
         />
-        <p className="mt-1 text-2xs text-text-dim">{personnelText.noteHelp}</p>
+        <p className="field-hint">{personnelText.noteHelp}</p>
       </div>
 
       <div>
-        <label htmlFor="classification" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="classification" className="field-label">
           {clearanceText.classification}
         </label>
         {/* Die Auswahl zeigt nur, was erlaubt ist. Geprüft wird trotzdem serverseitig. */}
@@ -145,7 +145,7 @@ function Feld({
 }) {
   return (
     <div>
-      <label htmlFor={id} className="font-condensed text-xs text-text-dim">
+      <label htmlFor={id} className="field-label">
         {label}
       </label>
       <input