From a853b066b58ab0a3d57233d88e7e2a8efcada064 Mon Sep 17 00:00:00 2001
From: Florian Wilde <fw@wildeflorian.de>
Date: Tue, 1 Sep 2026 23:29:12 +0200
Subject: [PATCH] Titelraster auf eine feste Zeilenhoehe bringen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Titelblock hatte mit line-clamp-2 zwar eine Ober-, aber keine
Untergrenze. Einzeilige Titel belegten dadurch 19 statt 39 Pixel, und alles
darunter rutschte um eine Zeilenhoehe nach oben — neben Karten mit
zweizeiligem Titel wirkte das Raster ausgefranst.

Der Titelblock bekommt jetzt mit min-h-[2lh] immer zwei Zeilen. Die Einheit
lh haengt an der tatsaechlichen Zeilenhoehe, damit der Wert nicht von einer
Aenderung an leading-snug abgehaengt wird.

In der Bibliothekskarte kam hinzu, dass der Fortschrittsbalken nur bei
Serien erscheint. Sein Platz wird jetzt auch dann freigehalten, wenn er
leer bleibt — als unsichtbarer Nachbau statt einer festen Pixelhoehe, damit
er sich von selbst nachzieht.

Nachgemessen bei 1400 px: Metazeilen einer Reihe liegen jetzt alle auf
derselben Oberkante (Suche 711 px, Bibliothek 715/1117/1520 px), und alle
Karten sind gleich hoch (353 bzw. 387 px). Vorher: 691 gegen 711 px und
Kartenhoehen von 333 bis 367 px. Bei Handybreite ebenfalls sauber.

Refs #2
---
 src/app/suche/page.tsx                 |  2 +-
 src/components/library/LibraryCard.tsx | 35 +++++++++++++++++---------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/app/suche/page.tsx b/src/app/suche/page.tsx
index e434b37..a1cef24 100644
--- a/src/app/suche/page.tsx
+++ b/src/app/suche/page.tsx
@@ -119,7 +119,7 @@ async function Results({ query, filter }: { query: string; filter: Filter }) {
             >
               <Poster path={item.posterPath} alt={item.title} size="w342" />
               <div className="mt-2 space-y-0.5">
-                <p className="line-clamp-2 text-sm font-medium leading-snug group-hover:text-[var(--fl-text)]">
+                <p className="line-clamp-2 min-h-[2lh] text-sm font-medium leading-snug group-hover:text-[var(--fl-text)]">
                   {item.title}
                 </p>
                 <p className="text-xs text-[var(--fl-faint)]">
diff --git a/src/components/library/LibraryCard.tsx b/src/components/library/LibraryCard.tsx
index abc50c5..057c5b7 100644
--- a/src/components/library/LibraryCard.tsx
+++ b/src/components/library/LibraryCard.tsx
@@ -63,7 +63,7 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
       </div>
 
       <div className="mt-2 space-y-1">
-        <p className="line-clamp-2 text-sm font-medium leading-snug">{item.title}</p>
+        <p className="line-clamp-2 min-h-[2lh] text-sm font-medium leading-snug">{item.title}</p>
         <p className="text-xs text-[var(--fl-faint)]">
           {item.type === "SERIES" ? "Serie" : "Film"}
           {item.year ? ` · ${item.year}` : ""}
@@ -74,17 +74,28 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
               : ""}
         </p>
 
-        {showProgress && (
-          <div className="pt-0.5">
-            <ProgressBar
-              percent={item.percent}
-              label={`${item.watched} von ${item.total} Episoden gesehen`}
-            />
-            <p className="mt-1 text-xs text-[var(--fl-faint)]">
-              {item.watched}/{item.total} Episoden
-            </p>
-          </div>
-        )}
+        <div className="pt-0.5">
+          {showProgress ? (
+            <>
+              <ProgressBar
+                percent={item.percent}
+                label={`${item.watched} von ${item.total} Episoden gesehen`}
+              />
+              <p className="mt-1 text-xs text-[var(--fl-faint)]">
+                {item.watched}/{item.total} Episoden
+              </p>
+            </>
+          ) : (
+            // Filme und Watchlist-Einträge haben keinen Balken. Der Platz wird
+            // trotzdem freigehalten — sonst fallen sie kürzer aus als Serien und
+            // das Raster franst reihenweise aus. Der Nachbau statt einer festen
+            // Pixelhöhe hält sich von selbst nach, wenn sich der Balken ändert.
+            <div className="invisible" aria-hidden>
+              <div className="fl-progress" />
+              <p className="mt-1 text-xs">&nbsp;</p>
+            </div>
+          )}
+        </div>
       </div>
     </Link>
   );
-- 
2.54.0