Story: Einheitliche Einrückung aller Listen in der Gesamtübersicht

As a Nutzer,
I want to alle Listen in der Gesamtübersicht (Todo, Einkaufsliste, Masterpackliste, Vorratsschrank, …)
auf derselben horizontalen Position sehen,
so that die Übersicht aufgeräumt und einheitlich wirkt statt zufällig verschoben.

Background

Gemeldet vom Nutzer: unterschiedlich starke Einrückung der Listen-Zeilen je nach Listentyp in der
Gesamtübersicht. Die einzelnen Zeilen-Komponenten (TodoListItem.tsx, ShoppingListItem.tsx,
MasterPackingListItem.tsx, PantryItem.tsx) haben leicht unterschiedliche Link-Inhalte vor dem
Titel (z. B. Default-Punkt + Icon bei Todo-Listen, nur ein Emoji-Präfix bei Masterpackliste/Pantry),
was zu leicht unterschiedlichem effektivem Texteinzug führen kann, obwohl alle dasselbe
px-4 py-2-Padding auf dem äußeren Link-Element verwenden.

AC

Architekt/Frontend prüfen den tatsächlichen (gerenderten) horizontalen Versatz des Listentitels über
alle Listentyp-Zeilenkomponenten hinweg und vereinheitlichen ihn (z. B. über eine gemeinsame,
feste Icon-/Präfix-Slot-Breite statt variabler Inline-Präfixe).
Nach dem Fix: alle Listentitel in der Gesamtübersicht beginnen an derselben horizontalen Position,
unabhängig vom Listentyp und unabhängig davon, ob z. B. ein "member"-Badge oder ein Archiv-Symbol
zusätzlich gerendert wird.

Out of scope

Sonstige visuelle Unterschiede zwischen Listentypen (Icons, Farben) — nur die horizontale Ausrichtung.

# Story: Einheitliche Einrückung aller Listen in der Gesamtübersicht **As a** Nutzer, **I want to** alle Listen in der Gesamtübersicht (Todo, Einkaufsliste, Masterpackliste, Vorratsschrank, …) auf derselben horizontalen Position sehen, **so that** die Übersicht aufgeräumt und einheitlich wirkt statt zufällig verschoben. ## Background Gemeldet vom Nutzer: unterschiedlich starke Einrückung der Listen-Zeilen je nach Listentyp in der Gesamtübersicht. Die einzelnen Zeilen-Komponenten (`TodoListItem.tsx`, `ShoppingListItem.tsx`, `MasterPackingListItem.tsx`, `PantryItem.tsx`) haben leicht unterschiedliche Link-Inhalte vor dem Titel (z. B. Default-Punkt + Icon bei Todo-Listen, nur ein Emoji-Präfix bei Masterpackliste/Pantry), was zu leicht unterschiedlichem effektivem Texteinzug führen kann, obwohl alle dasselbe `px-4 py-2`-Padding auf dem äußeren Link-Element verwenden. ## AC - Architekt/Frontend prüfen den tatsächlichen (gerenderten) horizontalen Versatz des Listentitels über alle Listentyp-Zeilenkomponenten hinweg und vereinheitlichen ihn (z. B. über eine gemeinsame, feste Icon-/Präfix-Slot-Breite statt variabler Inline-Präfixe). - Nach dem Fix: alle Listentitel in der Gesamtübersicht beginnen an derselben horizontalen Position, unabhängig vom Listentyp und unabhängig davon, ob z. B. ein "member"-Badge oder ein Archiv-Symbol zusätzlich gerendert wird. ## Out of scope - Sonstige visuelle Unterschiede zwischen Listentypen (Icons, Farben) — nur die horizontale Ausrichtung.

lena commented

2026-08-19 02:51:38 +02:00

(Migrated from git.butzei.de)

Claiming this. Plan: inspect the rendered horizontal offset of TodoListItem/ShoppingListItem/MasterPackingListItem/PantryItem, unify the prefix area (default-dot/icon/emoji) into a fixed-width slot so all list titles start at the same x position regardless of list type or extra badges.

lena commented

2026-08-19 04:06:58 +02:00

(Migrated from git.butzei.de)

Fixed. TodoListItem/ShoppingListItem/MasterPackingListItem/PantryItem each had their own variable-width inline prefix before the title (dot+icon, dot only, "emoji " as literal text, or nothing), so titles started at different horizontal positions depending on list type and archived/default state.

New shared ListItemPrefix component (ReactUi/src/components/ListItemPrefix.tsx) renders 3 fixed-width slots (archive/default-dot/icon) always, in the same order, across all four row components - unused slots stay reserved-but-empty rather than omitted.

Verification:

Unit tests (ListItemPrefix.test.tsx) assert the slot structure and a cross-component invariant: Todo/Shopping/MasterPacking/Pantry all render identical slot widths.
Full local suite: 1014/1014 vitest tests passed, npm run build clean.
Real browser layout check (built CSS + static markup, no jsdom): all four list titles measured at the identical left: 95px offset.
CI run 316 (commit 2c58cb3): all 10 jobs green, including all 4 E2E legs.

Closing as done.

Fixed. TodoListItem/ShoppingListItem/MasterPackingListItem/PantryItem each had their own variable-width inline prefix before the title (dot+icon, dot only, "emoji " as literal text, or nothing), so titles started at different horizontal positions depending on list type and archived/default state. New shared `ListItemPrefix` component (`ReactUi/src/components/ListItemPrefix.tsx`) renders 3 fixed-width slots (archive/default-dot/icon) always, in the same order, across all four row components - unused slots stay reserved-but-empty rather than omitted. Verification: - Unit tests (`ListItemPrefix.test.tsx`) assert the slot structure and a cross-component invariant: Todo/Shopping/MasterPacking/Pantry all render identical slot widths. - Full local suite: 1014/1014 vitest tests passed, `npm run build` clean. - Real browser layout check (built CSS + static markup, no jsdom): all four list titles measured at the identical `left: 95px` offset. - CI run 316 (commit 2c58cb3): all 10 jobs green, including all 4 E2E legs. Closing as done.

Rows
Columns

#123 — Einheitliche Einrückung aller Listen in der Gesamtübersicht #126

Story: Einheitliche Einrückung aller Listen in der Gesamtübersicht

Background

AC

Out of scope