Feste Spaltenbreiten für jede Listenzeile

„Keine Textzentrierung" - die Beobachtung stimmte an einundzwanzig Stellen, und
die Ursache war überall dieselbe: die Zeilen waren Flex-Behälter, in denen
jedes Element so breit war wie sein Inhalt. Damit fing der Titel in jeder Zeile
woanders an, und die Stempelmarken hatten nur rechts eine gemeinsame Kante. Bei
„ETHIK" und „WS" untereinander sieht man es sofort.

Die Breiten stehen jetzt einmal in globals.css - record-key, record-label,
record-title, record-meta, stamp-mark - und sind über Variablen je Liste
anpassbar: eine Liste von Abteilungskürzeln braucht keine vierzehn Zeichen,
eine Liste von Aktenzeichen schon.

Zwei Dinge, die dabei mehr sind als Kosmetik:

Eine Spalte wird auch reserviert, wenn sie leer ist. Vorher hing der Dienstgrad
an einer Bedingung, und bei einer Person ohne Rang rutschte alles Folgende nach
links.

Was keine Kennung ist, gehört nicht in die Kennungsspalte. In „Zuletzt
geöffnet" stand der Name einer Person dort, wo sonst das Aktenzeichen steht: in
Mono, abgeschnitten, und der Dienstgrad wanderte an die Stelle des Titels. Für
eine Person ist der Name der Titel.

Die Stempelmarke ist überall gleich breit; ein zu langer Name wird gekürzt, die
Stufenziffer bleibt stehen - sie ist die eigentliche Auskunft. Unter 40 rem
fallen die festen Breiten weg, sonst liefen sie über.

Nachgesehen im Browser mit dem gebauten CSS, Fallakten, Abteilungen, Zuletzt
geöffnet und Beteiligte.

web/app/(app)/uebersicht/page.tsx

@@ -114,7 +114,7 @@ export default async function DashboardPage() {
                     prefetch
                     className="flex items-baseline gap-4 py-2 text-text no-underline"
                   >
-                    <span className="font-mono text-xs text-text-dim">{eintrag.label}</span>
+                    <span className="record-key">{eintrag.label}</span>
                     <span className="grow font-condensed text-2xs text-accent">
                       {de.dashboard.unreadCount(eintrag.count)}
                     </span>
@@ -200,6 +200,11 @@ function Block({
  * Dokument sein — deshalb steht die Art nicht dabei, sondern nur das, woran
  * man sie erkennt: Aktenzeichen, Name oder Dokumentnummer.
  *
+ * Eine Akte und ein Dokument tragen eine **Kennung**, eine Person nicht: ihr
+ * Name ist der Titel. Stünde er in der Kennungsspalte, stünde er in Mono, wäre
+ * abgeschnitten, und der Dienstgrad rutschte dorthin, wo sonst der Titel
+ * steht — untereinander ergäbe das keine Spalte mehr.
+ *
  * Ohne Vorabruf, anders als die übrigen Listen: die Seiten dahinter merken
  * sich, dass sie geöffnet wurden. Der Vorabruf wird zwar serverseitig erkannt
  * und zählt nicht mit, aber ausgerechnet diese Liste sollte sich nicht selbst
@@ -216,11 +221,27 @@ function Sprung({
     <Link
       href={eintrag.href}
       prefetch={false}
-      className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+      className="record-row py-2 pl-3 text-text no-underline"
       style={classificationEdgeStyle(eintrag.classification)}
     >
-      <span className="font-mono text-xs text-text-dim">{eintrag.label}</span>
-      <span className="grow">{eintrag.secondary}</span>
+      {eintrag.targetType === 'PERSONNEL' ? (
+        <>
+          <span className="record-key" />
+          <span className="record-title">
+            {eintrag.label}
+            {eintrag.secondary ? (
+              <span className="ml-3 font-condensed text-2xs text-text-dim">
+                {eintrag.secondary}
+              </span>
+            ) : null}
+          </span>
+        </>
+      ) : (
+        <>
+          <span className="record-key">{eintrag.label}</span>
+          <span className="record-title">{eintrag.secondary}</span>
+        </>
+      )}
       <StampMark
         level={eintrag.classification}
         name={levelName.get(eintrag.classification) ?? de.common.unknown}
@@ -244,16 +265,12 @@ function Akte({
     <Link
       href={`/faelle/${akte.caseNumber}`}
       prefetch
-      className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+      className="record-row py-2 pl-3 text-text no-underline"
       style={classificationEdgeStyle(akte.classification)}
     >
-      <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-      <span className="grow">{akte.title}</span>
-      {zusatz ? (
-        <span className={`font-condensed text-2xs ${dringend ? 'text-stamp-4' : 'text-text-dim'}`}>
-          {zusatz}
-        </span>
-      ) : null}
+      <span className="record-key">{akte.caseNumber}</span>
+      <span className="record-title">{akte.title}</span>
+      <span className={`record-meta ${dringend ? 'text-stamp-4' : ''}`}>{zusatz}</span>
       <StampMark
         level={akte.classification}
         name={levelName.get(akte.classification) ?? de.common.unknown}