From 85bd2277142166732b03159d3a473eefa61df91d Mon Sep 17 00:00:00 2001
From: Duncan Tourolle <duncan@tourolle.paris>
Date: Wed, 12 Aug 2026 18:13:27 +0200
Subject: [PATCH] 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>
---
 src/lib/components/library/MediaCard.svelte | 16 +++++++++++++++-
 src/routes/+page.svelte                     |  5 ++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/library/MediaCard.svelte b/src/lib/components/library/MediaCard.svelte
index 7e9b488c..c9ce535d 100644
--- a/src/lib/components/library/MediaCard.svelte
+++ b/src/lib/components/library/MediaCard.svelte
@@ -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]";
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50d9c851..7897e776 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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>