web/src/lib/components/CompactTrackCard.svelte

@@ -5,6 +5,11 @@
   import TrackMenu from './TrackMenu.svelte';
   import CardActionCluster from './CardActionCluster.svelte';
 
+  // Horizontal compact track row — cover thumb on the left, title +
+  // artist on the right. Mirrors Android's CompactTrackTile so the
+  // Most Played section reads the same way across platforms (three
+  // narrow rows that scroll together).
+
   let {
     track,
     sectionTracks,
@@ -32,24 +37,27 @@
   }
 </script>
 
-<div class="card relative w-36">
+<div class="card group relative w-72">
   <button
     type="button"
     aria-label={`Play ${track.title}`}
     onclick={onClick}
-    class="group block w-full rounded text-left focus-visible:ring-2 focus-visible:ring-accent"
+    class="flex w-full items-center gap-2 rounded-md p-1 pr-12 text-left
+           hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"
   >
-    <div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
+    <div class="h-12 w-12 flex-shrink-0 overflow-hidden rounded bg-surface-hover">
       <img
         src={cover}
         alt=""
-        class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
+        class="h-full w-full object-cover"
         loading="lazy"
         onerror={onImgError}
       />
     </div>
-    <div class="mt-2 truncate text-xs font-medium text-text-primary">{track.title}</div>
-    <div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
+    <div class="min-w-0 flex-1">
+      <div class="truncate text-sm font-medium text-text-primary">{track.title}</div>
+      <div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
+    </div>
   </button>
   <CardActionCluster
     likeEntityType="track"

web/src/routes/+page.svelte

@@ -198,12 +198,10 @@
             ariaLabel="Rediscover albums"
           >
             {#snippet item(album: import('$lib/api/types').AlbumRef)}
-              <!-- Rediscover uses the compact tile size — same visual
-                   weight as Most Played's CompactTrackCard. Smaller
-                   than Recently Added (w-48) so the page hierarchy
-                   stays clear: fresh content gets visual real estate,
-                   throwbacks recede. -->
-              <div class="w-32"><AlbumCard {album} /></div>
+              <!-- Rediscover sits below Recently Added in the size
+                   hierarchy. w-40 keeps it readable without competing
+                   with the freshest content above. -->
+              <div class="w-40"><AlbumCard {album} /></div>
             {/snippet}
           </HorizontalScrollRow>
         {/if}
@@ -214,7 +212,7 @@
             ariaLabel="Rediscover artists"
           >
             {#snippet item(artist: import('$lib/api/types').ArtistRef)}
-              <div class="w-28"><ArtistCard {artist} /></div>
+              <div class="w-36"><ArtistCard {artist} /></div>
             {/snippet}
           </HorizontalScrollRow>
         {/if}