Doppeltes Rendern von Tabelle und Karten dokumentieren #28

Closed
opened 2026-08-23 16:57:01 +00:00 by florian.wilde · 2 comments
Owner

Problem

Mehrere Listen — die Dokumentenliste voran — rendern ihren Inhalt
zweimal: einmal als Tabelle für breite Fenster, einmal als Karten
fürs Handy. Eine der beiden ist per Breakpoint ausgeblendet, steht aber
im DOM.

Am Bildschirm sieht man davon nichts. Beim Testen schon: Ein
getByText(...).first() trifft die unsichtbare Kopie, und die Prüfung
scheitert mit „element is not visible" — an einer Stelle, die
augenscheinlich in Ordnung ist. Das hat beim Schreiben der Tests
mehrfach Zeit gekostet, weil man den Grund nicht sieht, sondern erst
suchen muss.

Was ich will

  • An den betroffenen Komponenten ein kurzer Kommentar, dass hier bewusst
    doppelt gerendert wird und was das fürs Testen bedeutet
  • In der Test-Hilfsdatei (e2e/hilfen.ts) ein Hinweis auf das Muster,
    am besten mit dem Weg, der funktioniert (über den Seitentext oder die
    Zusammenfassungszeile prüfen statt über das einzelne Element)
  • Prüfen, ob sich die Verdopplung an einer oder zwei Stellen ganz
    vermeiden lässt — eine Liste, die sich per CSS umbricht, wäre die
    bessere Lösung, sofern die Tabelle das hergibt

Akzeptanzkriterien

  • Jede doppelt rendernde Liste trägt einen erklärenden Kommentar
  • e2e/hilfen.ts beschreibt das Muster und den empfohlenen Weg
  • Wo eine einfache Lösung möglich ist, ist die Verdopplung entfernt

Hinweis

Keine Migration, keine sichtbare Änderung für den Benutzer —
Wartbarkeit.

Angelegt auf Zuruf im Chat, nicht aus dem Dashboard — bitte in Nebula
nachtragen.

## Problem Mehrere Listen — die Dokumentenliste voran — rendern ihren Inhalt **zweimal**: einmal als Tabelle für breite Fenster, einmal als Karten fürs Handy. Eine der beiden ist per Breakpoint ausgeblendet, steht aber im DOM. Am Bildschirm sieht man davon nichts. Beim Testen schon: Ein `getByText(...).first()` trifft die unsichtbare Kopie, und die Prüfung scheitert mit „element is not visible" — an einer Stelle, die augenscheinlich in Ordnung ist. Das hat beim Schreiben der Tests mehrfach Zeit gekostet, weil man den Grund nicht sieht, sondern erst suchen muss. ## Was ich will - An den betroffenen Komponenten ein kurzer Kommentar, dass hier bewusst doppelt gerendert wird und was das fürs Testen bedeutet - In der Test-Hilfsdatei (`e2e/hilfen.ts`) ein Hinweis auf das Muster, am besten mit dem Weg, der funktioniert (über den Seitentext oder die Zusammenfassungszeile prüfen statt über das einzelne Element) - Prüfen, ob sich die Verdopplung an einer oder zwei Stellen ganz vermeiden lässt — eine Liste, die sich per CSS umbricht, wäre die bessere Lösung, sofern die Tabelle das hergibt ## Akzeptanzkriterien - [ ] Jede doppelt rendernde Liste trägt einen erklärenden Kommentar - [ ] `e2e/hilfen.ts` beschreibt das Muster und den empfohlenen Weg - [ ] Wo eine einfache Lösung möglich ist, ist die Verdopplung entfernt ## Hinweis Keine Migration, keine sichtbare Änderung für den Benutzer — Wartbarkeit. _Angelegt auf Zuruf im Chat, nicht aus dem Dashboard — bitte in Nebula nachtragen._
florian.wilde added the in-arbeit label 2026-08-23 21:23:07 +00:00
florian.wilde started working 2026-08-23 21:23:29 +00:00
Author
Owner

🤖 Claude Code hat mit der Umsetzung begonnen.

  • Branch: fix/28-doppeltes-rendern
  • Verstanden als: Wo Inhalt zweimal im DOM steht und eine Fassung per Breakpoint versteckt ist, soll das am Code stehen und in der Test-Hilfsdatei erklärt sein — damit die nächste fehlschlagende Prüfung nicht erst gesucht werden muss.
  • Bestandsaufnahme: Betroffen ist eine Stelle, nicht mehrere, wie ich im Issue geschrieben hatte — dokument-liste.tsx (Karten am Handy, Tabelle ab Tablet). kalender-monat.tsx und das Stammdatenformular nutzen Breakpoints, rendern aber keinen Inhalt doppelt.
  • Geplantes Vorgehen:
    • Kommentar an der Dokumentenliste, was das fürs Testen bedeutet.
    • In e2e/hilfen.ts das Muster beschreiben und den Weg zeigen, der funktioniert.
    • Prüfen, ob sich die Verdopplung vermeiden lässt. Meine Erwartung: nein — eine Tabelle, die sich zu Karten umbricht, ginge nur mit display: block auf den Tabellenzeilen, und das kostet die Semantik, von der die Bedienung mit Tastatur und Vorlesesoftware lebt. Wenn es dabei bleibt, schreibe ich die Begründung dazu, statt es offen zu lassen.

Zeiterfassung läuft.

🤖 **Claude Code hat mit der Umsetzung begonnen.** - Branch: `fix/28-doppeltes-rendern` - Verstanden als: Wo Inhalt zweimal im DOM steht und eine Fassung per Breakpoint versteckt ist, soll das am Code stehen und in der Test-Hilfsdatei erklärt sein — damit die nächste fehlschlagende Prüfung nicht erst gesucht werden muss. - Bestandsaufnahme: Betroffen ist **eine** Stelle, nicht mehrere, wie ich im Issue geschrieben hatte — `dokument-liste.tsx` (Karten am Handy, Tabelle ab Tablet). `kalender-monat.tsx` und das Stammdatenformular nutzen Breakpoints, rendern aber keinen Inhalt doppelt. - Geplantes Vorgehen: - Kommentar an der Dokumentenliste, was das fürs Testen bedeutet. - In `e2e/hilfen.ts` das Muster beschreiben und den Weg zeigen, der funktioniert. - Prüfen, ob sich die Verdopplung vermeiden lässt. Meine Erwartung: nein — eine Tabelle, die sich zu Karten umbricht, ginge nur mit `display: block` auf den Tabellenzeilen, und das kostet die Semantik, von der die Bedienung mit Tastatur und Vorlesesoftware lebt. Wenn es dabei bleibt, schreibe ich die Begründung dazu, statt es offen zu lassen. Zeiterfassung läuft.
florian.wilde worked for 5 minutes 2026-08-23 21:28:35 +00:00
Author
Owner

🚀 Umgesetzt und nach main übernommen.

  • Merge-Commit: 8517247
  • Pull Request: #35 (gemergt)
  • Gesamtaufwand: 00:05

Was geändert wurde

  • Kommentar an src/components/dokumente/dokument-liste.tsx: dass jeder Eintrag zweimal im DOM steht, was das fürs Testen bedeutet, und warum es so bleibt.
  • Abschnitt Doppelt gerenderte Listen in e2e/hilfen.ts mit drei Wegen, die tragen: innerText für „steht das da", visible=true zum Klicken, die Zusammenfassungszeile für Anzahlen.

Nachgemessen statt behauptet: An /dokumente mit acht Dokumenten liefert ein Titel 16 Treffer, davon 8 sichtbar — und .first() ist die unsichtbare Kopie. Alle drei Rezepte habe ich ausprobiert, bevor sie in die Anleitung kamen.

Zur dritten Frage aus dem Issue — ob sich die Verdopplung vermeiden lässt: 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 Begründung steht jetzt am Code, statt die Frage offen zu lassen.

Eine Korrektur an meinem eigenen Issue-Text: Ich hatte „mehrere Listen" geschrieben. Betroffen ist genau eine — kalender-monat.tsx und das Stammdatenformular nutzen Breakpoints, ohne Inhalt doppelt zu rendern.

So prüfst du es

  1. git switch main && git pull
  2. src/components/dokumente/dokument-liste.tsx öffnen — der Hinweis steht im Kopfkommentar.
  3. e2e/hilfen.ts ans Ende scrollen.

Nur Kommentare, kein Verhalten geändert — weder Changelog noch Version.

🚀 **Umgesetzt und nach `main` übernommen.** <!-- claude-status branch: fix/28-doppeltes-rendern merge: 8517247 pr: 35 zeit_sekunden: 306 --> - Merge-Commit: `8517247` - Pull Request: #35 (gemergt) - Gesamtaufwand: 00:05 **Was geändert wurde** - Kommentar an `src/components/dokumente/dokument-liste.tsx`: dass jeder Eintrag zweimal im DOM steht, was das fürs Testen bedeutet, und warum es so bleibt. - Abschnitt *Doppelt gerenderte Listen* in `e2e/hilfen.ts` mit drei Wegen, die tragen: `innerText` für „steht das da", `visible=true` zum Klicken, die Zusammenfassungszeile für Anzahlen. **Nachgemessen statt behauptet:** An `/dokumente` mit acht Dokumenten liefert ein Titel **16 Treffer, davon 8 sichtbar** — und `.first()` ist die unsichtbare Kopie. Alle drei Rezepte habe ich ausprobiert, bevor sie in die Anleitung kamen. **Zur dritten Frage aus dem Issue — ob sich die Verdopplung vermeiden lässt: 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 Begründung steht jetzt am Code, statt die Frage offen zu lassen. **Eine Korrektur an meinem eigenen Issue-Text:** Ich hatte „mehrere Listen" geschrieben. Betroffen ist genau **eine** — `kalender-monat.tsx` und das Stammdatenformular nutzen Breakpoints, ohne Inhalt doppelt zu rendern. **So prüfst du es** 1. `git switch main && git pull` 2. `src/components/dokumente/dokument-liste.tsx` öffnen — der Hinweis steht im Kopfkommentar. 3. `e2e/hilfen.ts` ans Ende scrollen. Nur Kommentare, kein Verhalten geändert — weder Changelog noch Version.
florian.wilde removed the in-arbeit label 2026-08-23 21:30:07 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Total Time Spent: 5 minutes
florian.wilde
5 minutes
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: florian.wilde/betreuungs-cockpit#28