Titelraster: Beschriftungen springen, wenn ein Titel zweizeilig wird #2

New Issue

2026-09-01T20:56:39Z

florian.wilde commented

2026-09-01 20:56:39 +00:00

Beobachtung

Beim Hinzufügen eines Titels (/suche) sitzen die Beschriftungen unter den Postern nicht auf einer Linie. Wo ein Titel in eine Zeile passt („Avengers: Endgame"), rutscht die Zeile darunter („Film · 2019") um eine Zeilenhöhe nach oben — neben Karten mit zweizeiligem Titel wirkt das Raster ausgefranst.

Reproduziert und vermessen

Bei 1400 px Breite (sechs Spalten), Suche nach sternenpfad:

Titel	Titelblock	Oberkante „Film · Jahr"
Sternenpfad: Null	19 px (1 Zeile)	691
Sternenpfad: Akademie	19 px	691
Sternenpfad IV: Die Kartografin	39 px (2 Zeilen)	711
Sternenpfad: Die Grenzwacht	19 px	691

Die Poster einer Reihe stehen sauber auf einer Linie (alle bei 374 px) — die Beschriftungen darunter nicht. Der Versatz beträgt genau eine Zeilenhöhe, 20 px.

Zweiter Effekt: Die Reihenhöhen unterscheiden sich. Reihe 1 ist 353 px hoch (weil eine Karte darin zweizeilig ist), Reihe 2 nur 333 px. Der vertikale Rhythmus des Rasters ist dadurch ungleichmäßig.

Ursache

Die Karte stapelt Poster, Titel und Metazeile untereinander. Der Titel hat line-clamp-2, also höchstens zwei Zeilen — aber keine Mindesthöhe. Ein einzeiliger Titel belegt entsprechend weniger Platz, und alles darunter rutscht nach oben.

Betroffen sind beide Raster mit demselben Aufbau:

src/app/suche/page.tsx — Trefferraster (im Screenshot zu sehen)
src/components/library/LibraryCard.tsx — Bibliotheksraster; dort kommt erschwerend hinzu, dass der Fortschrittsbalken nur bei Serien erscheint, die Karten also noch stärker auseinanderlaufen

Vorschlag

Dem Titelblock eine feste Höhe von zwei Zeilen geben, damit die Beschriftung unabhängig vom Umbruch immer denselben Platz belegt. Dann liegen die Metazeilen einer Reihe auf einer Linie und alle Reihen sind gleich hoch.

Bei der Bibliothekskarte zusätzlich den Bereich für den Fortschrittsbalken reservieren, auch wenn er (bei Filmen oder Watchlist-Einträgen) leer bleibt — sonst bleibt das Raster dort ausgefranst.

Gegenprobe: dieselbe Messung wiederholen, alle Metazeilen einer Reihe müssen auf derselben Oberkante liegen, und alle Reihen dieselbe Höhe haben.

Aufwand

Klein — eine Mindesthöhe je Raster, danach die Messung wiederholen und in beiden Farbschemata sowie auf schmalem Gerät ansehen.

Angelegt auf ausdrücklichen Wunsch direkt in Gitea, ohne Verknüpfung zu einem Nebula-Task.

## Beobachtung Beim Hinzufügen eines Titels (`/suche`) sitzen die Beschriftungen unter den Postern nicht auf einer Linie. Wo ein Titel in eine Zeile passt („Avengers: Endgame"), rutscht die Zeile darunter („Film · 2019") um eine Zeilenhöhe nach oben — neben Karten mit zweizeiligem Titel wirkt das Raster ausgefranst. ## Reproduziert und vermessen Bei 1400 px Breite (sechs Spalten), Suche nach `sternenpfad`: | Titel | Titelblock | Oberkante „Film · Jahr" | |---|---|---| | Sternenpfad: Null | 19 px (1 Zeile) | **691** | | Sternenpfad: Akademie | 19 px | **691** | | Sternenpfad IV: Die Kartografin | 39 px (2 Zeilen) | **711** | | Sternenpfad: Die Grenzwacht | 19 px | **691** | Die Poster einer Reihe stehen sauber auf einer Linie (alle bei 374 px) — die Beschriftungen darunter nicht. Der Versatz beträgt genau eine Zeilenhöhe, 20 px. Zweiter Effekt: Die Reihenhöhen unterscheiden sich. Reihe 1 ist 353 px hoch (weil eine Karte darin zweizeilig ist), Reihe 2 nur 333 px. Der vertikale Rhythmus des Rasters ist dadurch ungleichmäßig. ## Ursache Die Karte stapelt Poster, Titel und Metazeile untereinander. Der Titel hat `line-clamp-2`, also **höchstens** zwei Zeilen — aber keine Mindesthöhe. Ein einzeiliger Titel belegt entsprechend weniger Platz, und alles darunter rutscht nach oben. Betroffen sind beide Raster mit demselben Aufbau: - `src/app/suche/page.tsx` — Trefferraster (im Screenshot zu sehen) - `src/components/library/LibraryCard.tsx` — Bibliotheksraster; dort kommt erschwerend hinzu, dass der Fortschrittsbalken nur bei Serien erscheint, die Karten also noch stärker auseinanderlaufen ## Vorschlag Dem Titelblock eine feste Höhe von zwei Zeilen geben, damit die Beschriftung unabhängig vom Umbruch immer denselben Platz belegt. Dann liegen die Metazeilen einer Reihe auf einer Linie und alle Reihen sind gleich hoch. Bei der Bibliothekskarte zusätzlich den Bereich für den Fortschrittsbalken reservieren, auch wenn er (bei Filmen oder Watchlist-Einträgen) leer bleibt — sonst bleibt das Raster dort ausgefranst. Gegenprobe: dieselbe Messung wiederholen, alle Metazeilen einer Reihe müssen auf derselben Oberkante liegen, und alle Reihen dieselbe Höhe haben. ## Aufwand Klein — eine Mindesthöhe je Raster, danach die Messung wiederholen und in beiden Farbschemata sowie auf schmalem Gerät ansehen. --- *Angelegt auf ausdrücklichen Wunsch direkt in Gitea, ohne Verknüpfung zu einem Nebula-Task.*

florian.wilde added the in-arbeit label 2026-09-01 21:21:49 +00:00

florian.wilde started working 2026-09-01 21:22:03 +00:00

florian.wilde commented

2026-09-01 21:22:12 +00:00

🤖 Claude Code hat mit der Umsetzung begonnen.

Branch: fix/2-titelraster-beschriftungen
Verstanden als: Die Kartenbeschriftungen sollen unabhängig davon, ob der Titel ein- oder zweizeilig umbricht, immer dieselbe Höhe belegen — in beiden Rastern (Suche und Bibliothek), sodass Metazeilen einer Reihe auf einer Linie liegen und alle Reihen gleich hoch sind.
Geplantes Vorgehen:
- Vorher-Messung mit Playwright festhalten, damit die Gegenprobe belastbar ist
- Titelblock in src/app/suche/page.tsx und src/components/library/LibraryCard.tsx auf zwei Zeilen Mindesthöhe festnageln
- In der Bibliothekskarte zusätzlich den Platz des Fortschrittsbalkens reservieren, damit Filme und Watchlist-Einträge nicht kürzer ausfallen
- Messung wiederholen, dazu Sichtprüfung in hell und dunkel sowie auf schmalem Gerät

Zeiterfassung läuft.

🤖 **Claude Code hat mit der Umsetzung begonnen.** - Branch: `fix/2-titelraster-beschriftungen` - Verstanden als: Die Kartenbeschriftungen sollen unabhängig davon, ob der Titel ein- oder zweizeilig umbricht, immer dieselbe Höhe belegen — in beiden Rastern (Suche und Bibliothek), sodass Metazeilen einer Reihe auf einer Linie liegen und alle Reihen gleich hoch sind. - Geplantes Vorgehen: - Vorher-Messung mit Playwright festhalten, damit die Gegenprobe belastbar ist - Titelblock in `src/app/suche/page.tsx` und `src/components/library/LibraryCard.tsx` auf zwei Zeilen Mindesthöhe festnageln - In der Bibliothekskarte zusätzlich den Platz des Fortschrittsbalkens reservieren, damit Filme und Watchlist-Einträge nicht kürzer ausfallen - Messung wiederholen, dazu Sichtprüfung in hell und dunkel sowie auf schmalem Gerät Zeiterfassung läuft.

florian.wilde worked for 2 minutes

2026-09-01 21:24:29 +00:00

florian.wilde started working 2026-09-01 21:25:55 +00:00

florian.wilde worked for 3 minutes

2026-09-01 21:29:18 +00:00

florian.wilde referenced this issue from a commit

2026-09-01 21:29:24 +00:00

Titelraster auf eine feste Zeilenhoehe bringen

florian.wilde referenced a pull request that will close this issue

2026-09-01 21:29:36 +00:00

Fix #2: Titelraster: Beschriftungen springen, wenn ein Titel zweizeilig wird #7

florian.wilde added zu-testen and removed in-arbeit labels 2026-09-01 21:29:41 +00:00

florian.wilde commented

2026-09-01 21:29:52 +00:00

✅ Umsetzung abgeschlossen — bereit zum Testen.

Was geändert wurde

Titelblock in beiden Rastern auf zwei Zeilen Mindesthöhe (min-h-[2lh]). Die Einheit lh hängt an der tatsächlichen Zeilenhöhe, damit der Wert nicht abgehängt wird, wenn später jemand an leading-snug dreht.
In der Bibliothekskarte den Platz des Fortschrittsbalkens auch dann reserviert, wenn er leer bleibt (Filme, Watchlist). Umgesetzt als unsichtbarer Nachbau derselben Struktur statt einer festen Pixelhöhe — so zieht er sich von selbst nach, falls sich der Balken ändert.

Geänderte Dateien

src/app/suche/page.tsx
src/components/library/LibraryCard.tsx

Nachgemessen (dieselbe Messung wie in der Beschreibung, 1400 px)

	vorher	nachher
Metazeilen einer Reihe (Suche)	691 und 711 px	alle 711 px
Metazeilen (Bibliothek)	695/715, 1066/1085 px	alle 715, 1117, 1520 px
Kartenhöhen Suche	353 und 333 px	alle 353 px
Kartenhöhen Bibliothek	355 und 367 px	alle 387 px

Bei Handybreite (390 px) ebenfalls durchgehend gleich hoch. Sichtprüfung in hell und dunkel gemacht. Typecheck sauber, 52 Tests grün.

So testest du es

git switch fix/2-titelraster-beschriftungen
npm run dev (Port 3011) und /bibliothek öffnen
Erwartet: Die Zeilen „Film · Jahr · Dienst" liegen innerhalb einer Reihe auf einer Linie — auch neben Karten mit zweizeiligem Titel wie „Die Stille zwischen den Bildern II". Alle Reihen sind gleich hoch, auch die ohne Serien.
Dasselbe unter /suche nach dem Hinzufügen eines Titels prüfen — das war der Fall aus dem Screenshot.
Fenster schmal ziehen: auch bei zwei Spalten bleibt das Raster ruhig.

Aufgewendete Zeit: 00:06
Pull Request: #7

Nach Freigabe: /issue-freigabe 2

✅ **Umsetzung abgeschlossen — bereit zum Testen.**  **Was geändert wurde** - Titelblock in beiden Rastern auf zwei Zeilen Mindesthöhe (`min-h-[2lh]`). Die Einheit `lh` hängt an der tatsächlichen Zeilenhöhe, damit der Wert nicht abgehängt wird, wenn später jemand an `leading-snug` dreht. - In der Bibliothekskarte den Platz des Fortschrittsbalkens auch dann reserviert, wenn er leer bleibt (Filme, Watchlist). Umgesetzt als unsichtbarer Nachbau derselben Struktur statt einer festen Pixelhöhe — so zieht er sich von selbst nach, falls sich der Balken ändert. **Geänderte Dateien** - `src/app/suche/page.tsx` - `src/components/library/LibraryCard.tsx` **Nachgemessen** (dieselbe Messung wie in der Beschreibung, 1400 px) | | vorher | nachher | |---|---|---| | Metazeilen einer Reihe (Suche) | 691 **und** 711 px | alle 711 px | | Metazeilen (Bibliothek) | 695/715, 1066/1085 px | alle 715, 1117, 1520 px | | Kartenhöhen Suche | 353 **und** 333 px | alle 353 px | | Kartenhöhen Bibliothek | 355 **und** 367 px | alle 387 px | Bei Handybreite (390 px) ebenfalls durchgehend gleich hoch. Sichtprüfung in hell und dunkel gemacht. Typecheck sauber, 52 Tests grün. **So testest du es** 1. `git switch fix/2-titelraster-beschriftungen` 2. `npm run dev` (Port 3011) und `/bibliothek` öffnen 3. Erwartet: Die Zeilen „Film · Jahr · Dienst" liegen innerhalb einer Reihe auf einer Linie — auch neben Karten mit zweizeiligem Titel wie „Die Stille zwischen den Bildern II". Alle Reihen sind gleich hoch, auch die ohne Serien. 4. Dasselbe unter `/suche` nach dem Hinzufügen eines Titels prüfen — das war der Fall aus dem Screenshot. 5. Fenster schmal ziehen: auch bei zwei Spalten bleibt das Raster ruhig. **Aufgewendete Zeit:** 00:06 **Pull Request:** #7 Nach Freigabe: `/issue-freigabe 2`

florian.wilde commented

2026-09-01 21:30:20 +00:00

📝 Nebenbei aufgefallen — gehört nicht in diesen PR, hier nur festgehalten, damit es nicht verloren geht:

scripts/shot.mjs meldet sich nicht an. Ruft man es auf eine geschützte Seite, landet man auf /anmelden und bekommt kommentarlos ein Bild der Anmeldemaske statt der gewünschten Seite — kein Fehler, kein Hinweis. Ist mir hier passiert. Ein --login-Schalter oder wenigstens eine Warnung, wenn die Ziel-URL nach einer Umleitung nicht mehr stimmt, würde das abfangen.
Irreführender Kommentar in setOrderPositions() (src/lib/universes.ts:266). Dort steht „Erst alle auf negative Positionen schieben: die Eindeutigkeit von (orderId, itemId) bleibt, aber wir vermeiden Kollisionen beim Umnummerieren" — der Code macht das aber nicht, er schreibt die Positionen direkt. Nachgesehen: die Eindeutigkeit liegt auf (orderId, itemId), nicht auf der Position, ein Zusammenstoß ist also gar nicht möglich. Kein Fehler im Verhalten, nur ein Kommentar, der etwas anderes behauptet als der Code tut. Sollte weg oder richtiggestellt werden.

📝 **Nebenbei aufgefallen** — gehört nicht in diesen PR, hier nur festgehalten, damit es nicht verloren geht: 1. **`scripts/shot.mjs` meldet sich nicht an.** Ruft man es auf eine geschützte Seite, landet man auf `/anmelden` und bekommt kommentarlos ein Bild der Anmeldemaske statt der gewünschten Seite — kein Fehler, kein Hinweis. Ist mir hier passiert. Ein `--login`-Schalter oder wenigstens eine Warnung, wenn die Ziel-URL nach einer Umleitung nicht mehr stimmt, würde das abfangen. 2. **Irreführender Kommentar in `setOrderPositions()`** (`src/lib/universes.ts:266`). Dort steht „Erst alle auf negative Positionen schieben: die Eindeutigkeit von (orderId, itemId) bleibt, aber wir vermeiden Kollisionen beim Umnummerieren" — der Code macht das aber nicht, er schreibt die Positionen direkt. Nachgesehen: die Eindeutigkeit liegt auf `(orderId, itemId)`, nicht auf der Position, ein Zusammenstoß ist also gar nicht möglich. **Kein Fehler im Verhalten**, nur ein Kommentar, der etwas anderes behauptet als der Code tut. Sollte weg oder richtiggestellt werden.

florian.wilde closed this issue

2026-09-01 21:31:44 +00:00

florian.wilde referenced this issue from a commit

2026-09-01 21:31:45 +00:00

Merge #7: Titelraster auf eine feste Zeilenhoehe bringen

florian.wilde commented

2026-09-01 21:32:00 +00:00

🚀 Freigegeben und nach main übernommen.

Merge-Commit: 9d4e419
Pull Request: #7 (gemergt)
Gesamtaufwand: 00:06

Vor dem Merge noch einmal geprüft: Typecheck sauber, 52 Tests grün.

Issue wird geschlossen.

🚀 **Freigegeben und nach `main` übernommen.**  - Merge-Commit: `9d4e419` - Pull Request: #7 (gemergt) - Gesamtaufwand: 00:06 Vor dem Merge noch einmal geprüft: Typecheck sauber, 52 Tests grün. Issue wird geschlossen.

florian.wilde removed the zu-testen label 2026-09-01 21:32:03 +00:00

florian.wilde referenced this issue

2026-09-01 22:11:49 +00:00

Chore: Update-Skript erkennt den Container-Zustand, Merkposten ergänzt #10

florian.wilde referenced this issue

2026-09-02 08:36:19 +00:00

Release 0.8.0 #14

Sign in to join this conversation.