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

Merged
florian.wilde merged 1 commits from fix/2-titelraster-beschriftungen into main 2026-09-01 21:31:44 +00:00
2 changed files with 24 additions and 13 deletions
+1 -1
View File
@@ -119,7 +119,7 @@ async function Results({ query, filter }: { query: string; filter: Filter }) {
> >
<Poster path={item.posterPath} alt={item.title} size="w342" /> <Poster path={item.posterPath} alt={item.title} size="w342" />
<div className="mt-2 space-y-0.5"> <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} {item.title}
</p> </p>
<p className="text-xs text-[var(--fl-faint)]"> <p className="text-xs text-[var(--fl-faint)]">
+13 -2
View File
@@ -63,7 +63,7 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
</div> </div>
<div className="mt-2 space-y-1"> <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)]"> <p className="text-xs text-[var(--fl-faint)]">
{item.type === "SERIES" ? "Serie" : "Film"} {item.type === "SERIES" ? "Serie" : "Film"}
{item.year ? ` · ${item.year}` : ""} {item.year ? ` · ${item.year}` : ""}
@@ -74,8 +74,9 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
: ""} : ""}
</p> </p>
{showProgress && (
<div className="pt-0.5"> <div className="pt-0.5">
{showProgress ? (
<>
<ProgressBar <ProgressBar
percent={item.percent} percent={item.percent}
label={`${item.watched} von ${item.total} Episoden gesehen`} label={`${item.watched} von ${item.total} Episoden gesehen`}
@@ -83,9 +84,19 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
<p className="mt-1 text-xs text-[var(--fl-faint)]"> <p className="mt-1 text-xs text-[var(--fl-faint)]">
{item.watched}/{item.total} Episoden {item.watched}/{item.total} Episoden
</p> </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> </div>
</div>
</Link> </Link>
); );
} }