Fix #2: Titelraster: Beschriftungen springen, wenn ein Titel zweizeilig wird #7
@@ -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)]">
|
||||||
|
|||||||
@@ -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,17 +74,28 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
|
|||||||
: ""}
|
: ""}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{showProgress && (
|
<div className="pt-0.5">
|
||||||
<div className="pt-0.5">
|
{showProgress ? (
|
||||||
<ProgressBar
|
<>
|
||||||
percent={item.percent}
|
<ProgressBar
|
||||||
label={`${item.watched} von ${item.total} Episoden gesehen`}
|
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 className="mt-1 text-xs text-[var(--fl-faint)]">
|
||||||
</p>
|
{item.watched}/{item.total} Episoden
|
||||||
</div>
|
</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"> </p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user