fix(home): uniform card heights in the Your Libraries row

MediaCard derives its artwork aspect ratio from the item, so a music
library rendered aspect-square (144px tall at w-36) next to video
libraries at aspect-video (81px), leaving the home row ragged.

Add an optional `aspect` prop that overrides the derived ratio, and pass
aspect="video" from the home Libraries strip. Unset, behaviour is
unchanged, so the /library overview grid and the media carousels keep
their per-type ratios. Artwork already uses object-cover, so square music
art crops rather than distorts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-12 18:13:27 +02:00
co-authored by Claude Opus 5
parent 3619f71aba
commit 85bd227714
2 changed files with 19 additions and 2 deletions
+15 -1
View File
@@ -45,9 +45,16 @@
* TRACES: UR-068 | DR-119
*/
showFavorite?: boolean;
/**
* Force the artwork box to a fixed aspect ratio instead of deriving one from
* the item. Use on rows that mix item kinds (e.g. the home "Your Libraries"
* strip, where square music art next to 16:9 video art would otherwise give
* the cards different heights). Artwork still fills the box via object-cover.
*/
aspect?: "square" | "video" | "poster";
}
let { item, size = "medium", showProgress = false, showDownloadStatus = true, sizeLabel, downloadedBadge, onRemove, onclick, onLongPress, showFavorite = true }: Props = $props();
let { item, size = "medium", showProgress = false, showDownloadStatus = true, sizeLabel, downloadedBadge, onRemove, onclick, onLongPress, showFavorite = true, aspect }: Props = $props();
// Long-press detection. We arm a timer on pointerdown; if it fires before the
// pointer is released (or moves too far), we treat it as a long press and set a
@@ -179,7 +186,14 @@
"kind" in item && (item.kind === "track" || item.kind === "album" || item.kind === "artist" || item.kind === "playlist")
);
const FIXED_ASPECT = {
square: "aspect-square",
video: "aspect-video",
poster: "aspect-[2/3]",
} as const;
const aspectRatio = $derived(() => {
if (aspect) return FIXED_ASPECT[aspect];
if ("kind" in item) {
return isMusicType ? "aspect-square" : "aspect-[2/3]";
}
+4 -1
View File
@@ -159,12 +159,15 @@
{#if shortcutLibraries.length > 0}
<div>
<h2 class="text-xl font-bold text-white mb-4 px-4">Your Libraries</h2>
<div class="flex gap-4 overflow-x-auto px-4 pb-2">
<div class="flex gap-4 overflow-x-auto px-4 pb-2 items-start">
{#each shortcutLibraries as lib (lib.id)}
<div class="flex-shrink-0">
<!-- Uniform 16:9 artwork so music (square) and video libraries
line up at the same height in this mixed row. -->
<MediaCard
item={lib}
size="medium"
aspect="video"
onclick={() => handleLibraryClick(lib)}
/>
</div>