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
+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>