Doppelt gerenderte Listen dokumentieren

Die Dokumentenliste rendert jeden Eintrag zweimal: als Karte fuers Handy,
als Tabellenzeile ab Tablet. Eine Fassung ist per Breakpoint versteckt,
steht aber im DOM. Beim Testen trifft getByText(...).first() deshalb die
unsichtbare Kopie, und die Pruefung scheitert mit "element is not
visible" an einer Stelle, die augenscheinlich in Ordnung ist. Das hat
mehrfach Zeit gekostet, weil man den Grund nicht sieht.

Nachgemessen an /dokumente mit acht Dokumenten: ein Titel liefert 16
Treffer, davon 8 sichtbar - und first() ist unsichtbar.

- Kommentar an der Komponente, mit dem Verweis auf die Hilfsdatei.
- In e2e/hilfen.ts das Muster beschrieben und drei Wege genannt, die
  tragen: innerText fuer "steht das da", visible=true zum Klicken, die
  Zusammenfassungszeile fuer Anzahlen. Alle drei nachgeprueft, bevor sie
  aufgeschrieben wurden - eine Anleitung mit kaputtem Rezept waere
  schlimmer als keine.

Zur Frage aus dem Issue, ob sich die Verdopplung vermeiden laesst: nein,
nicht ohne Verlust. Eine Tabelle, die zu Karten umbricht, verlangt
display:block auf Zeilen und Zellen - damit ist es keine Tabelle mehr,
Vorlesesoftware verliert den Zusammenhang von Spaltenkopf und Wert, und
genau der macht eine Liste mit acht Spalten erst benutzbar. Die
Begruendung steht jetzt am Code, statt die Frage offen zu lassen.

Betroffen ist uebrigens nur diese eine Stelle, nicht mehrere:
kalender-monat.tsx und das Stammdatenformular nutzen Breakpoints, ohne
Inhalt doppelt zu rendern.

Refs #28

e2e/hilfen.ts

@@ -117,3 +117,46 @@ export function beispielPdf(text = 'Bescheid'): Buffer {
 
   return Buffer.from(pdf, 'latin1')
 }
+
+/**
+ * Doppelt gerenderte Listen — was beim Suchen schiefgeht.
+ *
+ * Die Dokumentenliste (und moeglicherweise kuenftig weitere) rendert
+ * denselben Inhalt ZWEIMAL: als Karten fuers Handy, als Tabelle ab
+ * Tablet. Eine der beiden Fassungen ist per Breakpoint versteckt, steht
+ * aber im DOM.
+ *
+ * Die Folge im Test:
+ *
+ *   await expect(page.getByText('Bescheid').first()).toBeVisible()
+ *   // -> "element is not visible", obwohl die Seite richtig aussieht
+ *
+ * `.first()` nimmt, was zuerst im Baum steht - und das ist die Karte,
+ * also am Schreibtisch die unsichtbare Fassung. Es liegt NICHT an der
+ * Anwendung.
+ *
+ * Nachgemessen an /dokumente mit acht Dokumenten: Ein Titel liefert 16
+ * Treffer, davon 8 sichtbar - und `.first()` ist unsichtbar.
+ *
+ * Drei Wege, die tragen:
+ *
+ *   1. Ueber den Seitentext pruefen, wenn es nur um "steht das da?" geht:
+ *
+ *        const inhalt = await page.locator('body').innerText()
+ *        expect(inhalt).toContain('Bescheid')
+ *
+ *      innerText liefert nur sichtbaren Text - die versteckte Fassung
+ *      faellt von selbst weg. (Fuer Inhalt in einem zugeklappten
+ *      <details> braucht es dagegen textContent.)
+ *
+ *   2. Auf die sichtbare Fassung einschraenken, wenn geklickt wird:
+ *
+ *        page.getByRole('link', { name: 'Bescheid' }).locator('visible=true')
+ *
+ *   3. Die Zusammenfassungszeile pruefen ("12 Dokumente"), wenn es um
+ *      Anzahlen geht - die steht nur einmal.
+ *
+ * Was nicht traegt: eine feste Anzahl erwarten. `getByText(...)` findet
+ * jeden Eintrag zweimal, und wer das mit toHaveCount(1) prueft, schreibt
+ * einen Test, der bei jeder Layoutaenderung umfaellt.
+ */

src/components/dokumente/dokument-liste.tsx

@@ -17,6 +17,21 @@ import {
  *
  * Am Handy eine Karte je Dokument, ab Tablet eine Tabelle - die Tabelle
  * scrollt dabei im eigenen Rahmen, nie die ganze Seite.
+ *
+ * ACHTUNG, jeder Inhalt steht ZWEIMAL im DOM: einmal als Karte, einmal
+ * als Tabellenzeile. Eine der beiden Fassungen ist per Breakpoint
+ * versteckt, steht aber trotzdem im Baum.
+ *
+ * Fuer Tests heisst das: getByText(...).first() trifft womoeglich die
+ * unsichtbare Kopie, und die Pruefung scheitert mit "element is not
+ * visible" an einer Stelle, die augenscheinlich in Ordnung ist. Der Weg,
+ * der traegt, steht in e2e/hilfen.ts unter "Doppelt gerenderte Listen".
+ *
+ * Warum nicht eine Fassung fuer beide? Eine Tabelle, die sich zu Karten
+ * umbricht, verlangt display:block auf Zeilen und Zellen. Damit ist es
+ * keine Tabelle mehr - Vorlesesoftware verliert den Zusammenhang von
+ * Spaltenkopf und Wert, und genau der macht eine Dokumentenliste mit
+ * acht Spalten erst benutzbar. Die Verdopplung ist der Preis dafuer.
  */
 export function DokumentListe({ eintraege }: { eintraege: Listeneintrag[] }) {
   return (