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/globals.css

@@ -313,6 +313,107 @@
     background-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-raised));
   }
 
+  /* ---------------------------------------------------------------------
+     Die Zeile einer Liste.
+
+     Jede Liste in dieser Anwendung zeigt dasselbe Gebilde: eine Kennung, ein
+     Titel, etwas Beiwerk, eine Stempelmarke. Bisher bestimmte **jede Zeile
+     ihre Spaltenbreiten selbst** — die Kennung war so breit wie ihr Text, und
+     damit fing der Titel in jeder Zeile woanders an. Bei „ETHIK" und „WS"
+     untereinander sieht man das sofort.
+
+     Die Breiten stehen deshalb hier und nicht an den Aufrufstellen. Sie sind
+     Variablen: eine Liste von Abteilungskuerzeln braucht keine vierzehn
+     Zeichen, eine Liste von Aktenzeichen schon. Was gleich bleibt, ist dass
+     **innerhalb einer Liste** alles buendig steht.
+     --------------------------------------------------------------------- */
+  .record-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 1rem;
+    row-gap: 0.25rem;
+  }
+
+  /* Die Kennung: Aktenzeichen, Dokumentnummer, Abteilungskuerzel. Mono mit
+     Tabellenziffern, damit auch die Ziffern untereinander stehen. */
+  .record-key {
+    flex: none;
+    width: var(--record-key, 14ch);
+    overflow: hidden;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-dim);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Wie die Kennung, aber fuer eine Bezeichnung aus einer festen Liste:
+     die Rolle eines Beteiligten, die Art eines Auftrags. Kein Mono — es ist
+     Sprache, keine Nummer. */
+  .record-label {
+    flex: none;
+    width: var(--record-label, 11rem);
+    overflow: hidden;
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    color: var(--color-text-dim);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Der Titel nimmt den Rest. `min-width: 0` ist noetig, damit ein langer
+     Titel die Zeile nicht aufblaeht, statt zu kuerzen. */
+  .record-title {
+    flex: 1 1 10rem;
+    min-width: 0;
+  }
+
+  /* Beiwerk am rechten Rand: Status, Datum, Anzahl. Rechtsbuendig, damit die
+     Spalte eine Kante hat. */
+  .record-meta {
+    flex: none;
+    width: var(--record-meta, 7rem);
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    color: var(--color-text-dim);
+    text-align: right;
+  }
+
+  /* Auf schmalen Schirmen gibt es keine Spalten, nur noch Zeilen. Feste
+     Breiten wuerden dort ueberlaufen. */
+  @media (max-width: 40rem) {
+    .record-key,
+    .record-label,
+    .record-meta {
+      width: auto;
+      text-align: left;
+    }
+  }
+
+  /* Die Stempelmarke: ueberall gleich breit, siehe components/StampMark.tsx. */
+  .stamp-mark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.375rem;
+    width: var(--stamp-width, 11.5rem);
+    max-width: 100%;
+    border: 1px solid;
+    border-radius: var(--radius-control);
+    padding: 0.1rem 0.6rem;
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    line-height: 1.5;
+  }
+
+  .stamp-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* Der Ladepunkt in einem Link, solange der Wechsel laeuft. Kein Kreisel:
      eine ruhig pulsierende Scheibe in der Groesse eines Satzzeichens, die
      nichts verdeckt und nichts aufhaelt. */