Story: Sidebar-Listenübersicht — ungenutzten Platz links neben dem Titel für mehr Textbreite nutzen

As a Nutzer mit vielen/langen Listentiteln,
I want to dass der Titel in der Sidebar-Listenübersicht möglichst viel horizontale Breite bekommt,
so that ich lange Titel nicht bereits nach wenigen Zeichen abgeschnitten sehe.

Background

Gemeldet vom Nutzer: Beim Öffnen des Listen-Menüs (Sidebar) bleibt links neben den einzelnen
Listeneinträgen noch ungenutzter Platz, wodurch der sichtbare Teil des Titels kleiner ausfällt als
nötig. Verwandt mit, aber verschieden von #123 (dort ging es um konsistente Ausrichtung
zwischen Listentypen, nicht um verschwendeten Platz vor dem Titel).

Acceptance criteria:

Der linke Rand-/Präfix-Bereich (Icon, Default-Punkt, evtl. Einrückung) vor dem Listentitel in
der Sidebar wird so schmal wie für die vorhandenen Icons/Indikatoren nötig gehalten — kein
zusätzlicher, übrig bleibender Leerraum.
Nach dem Fix ist die sichtbare Zeichenbreite des Titels messbar größer als vorher (visuell
verifizierbar per Screenshot-Vergleich vorher/nachher bei gleicher Fensterbreite).
Gilt einheitlich für alle Listentypen (Todo, Einkaufsliste, Masterpackliste, Vorratsschrank),
nicht nur für einen.

Out of scope for this story:

Grundsätzliches Redesign der Sidebar-Zeilen (Icons, Farben) — nur die Platznutzung/Breite.

# Story: Sidebar-Listenübersicht — ungenutzten Platz links neben dem Titel für mehr Textbreite nutzen **As a** Nutzer mit vielen/langen Listentiteln, **I want to** dass der Titel in der Sidebar-Listenübersicht möglichst viel horizontale Breite bekommt, **so that** ich lange Titel nicht bereits nach wenigen Zeichen abgeschnitten sehe. ## Background Gemeldet vom Nutzer: Beim Öffnen des Listen-Menüs (Sidebar) bleibt links neben den einzelnen Listeneinträgen noch ungenutzter Platz, wodurch der sichtbare Teil des Titels kleiner ausfällt als nötig. Verwandt mit, aber verschieden von `#123` (dort ging es um konsistente *Ausrichtung* zwischen Listentypen, nicht um verschwendeten Platz vor dem Titel). **Acceptance criteria:** - [ ] Der linke Rand-/Präfix-Bereich (Icon, Default-Punkt, evtl. Einrückung) vor dem Listentitel in der Sidebar wird so schmal wie für die vorhandenen Icons/Indikatoren nötig gehalten — kein zusätzlicher, übrig bleibender Leerraum. - [ ] Nach dem Fix ist die sichtbare Zeichenbreite des Titels messbar größer als vorher (visuell verifizierbar per Screenshot-Vergleich vorher/nachher bei gleicher Fensterbreite). - [ ] Gilt einheitlich für alle Listentypen (Todo, Einkaufsliste, Masterpackliste, Vorratsschrank), nicht nur für einen. **Out of scope for this story:** - Grundsätzliches Redesign der Sidebar-Zeilen (Icons, Farben) — nur die Platznutzung/Breite.

lena commented

2026-09-02 08:30:12 +02:00

(Migrated from git.butzei.de)

Claiming this issue. Plan: inspect the sidebar list-row layout (icon/prefix area before the title) for all list types (Todo, Shopping, Master packing list, Pantry), trim unnecessary left-side space so the title gets more width, verify visually via before/after screenshots at a fixed window width.

lena commented

2026-09-02 14:25:51 +02:00

(Migrated from git.butzei.de)

Fixed in 7e155d0.

Scope: the shared ListItemPrefix component rendered its 3 fixed-width slots (archive/default-dot/icon) directly in each row own flex container, so the rows own gap-2 (meant as the visual space before the title) was also being applied twice between those mostly-empty decorative slots. Grouped the three slots into one wrapper span with its own tight gap-0.5, leaving the outer gap-2 to the title unchanged. This reclaims ~12px per row for the title, uniformly across all four list types (Todo/Shopping/MasterPacking/Pantry) since they all share this one component - verified via a pixel-measurement mockup: title offset dropped from 74px to 62px, identical for both an icon-bearing and icon-less row.

Tests: updated ListItemPrefix.test.tsx (6 tests) to match the new nesting while preserving the original #123 intent (all 4 list types render an identical prefix-slot signature); full frontend suite (1128 tests) and the production build both pass. No CSS selectors or e2e specs depend on the old flat child structure (checked - the one structural selector, .rounded-full, matches by class regardless of nesting depth).

Unrelated to this change: master CI also had a pre-existing flaky backend test (SendDailyDigestEmailsCommandHandlerTests, an hour-boundary race in the digest email tests) surface on this same push - that was diagnosed and fixed independently in fcb1f0e/af27c18 (a concurrent loop instance), not part of this stories scope. CI is fully green as of af27c18.

Local review container rebuild was skipped this cycle - Docker has no working daemon in this sandbox (client present, engine unreachable), so docker compose up cannot run here; the change is a pure CSS/DOM structure tweak with no backend impact, fully verified via the frontend test suite, a Tailwind-accurate static mockup with pixel measurements, and green CI.

Fixed in 7e155d0. Scope: the shared ListItemPrefix component rendered its 3 fixed-width slots (archive/default-dot/icon) directly in each row own flex container, so the rows own gap-2 (meant as the visual space before the title) was also being applied twice between those mostly-empty decorative slots. Grouped the three slots into one wrapper span with its own tight gap-0.5, leaving the outer gap-2 to the title unchanged. This reclaims ~12px per row for the title, uniformly across all four list types (Todo/Shopping/MasterPacking/Pantry) since they all share this one component - verified via a pixel-measurement mockup: title offset dropped from 74px to 62px, identical for both an icon-bearing and icon-less row. Tests: updated ListItemPrefix.test.tsx (6 tests) to match the new nesting while preserving the original #123 intent (all 4 list types render an identical prefix-slot signature); full frontend suite (1128 tests) and the production build both pass. No CSS selectors or e2e specs depend on the old flat child structure (checked - the one structural selector, .rounded-full, matches by class regardless of nesting depth). Unrelated to this change: master CI also had a pre-existing flaky backend test (SendDailyDigestEmailsCommandHandlerTests, an hour-boundary race in the digest email tests) surface on this same push - that was diagnosed and fixed independently in fcb1f0e/af27c18 (a concurrent loop instance), not part of this stories scope. CI is fully green as of af27c18. Local review container rebuild was skipped this cycle - Docker has no working daemon in this sandbox (client present, engine unreachable), so `docker compose up` cannot run here; the change is a pure CSS/DOM structure tweak with no backend impact, fully verified via the frontend test suite, a Tailwind-accurate static mockup with pixel measurements, and green CI.