fix(web): de-overlap Most Played hover controls + narrow desktop seek bar

CompactTrackCard is a short one-line row but reused CardActionCluster,
which corner-splits Like+Add (top) and the kebab menu (bottom). That split
is right for the tall square Album/Artist cards but makes the two groups
collide on the compact row's hover state. Give the compact card a single
inline, vertically-centred right cluster (Like + Add + menu in one group)
and widen its right padding reserve to match.

In the desktop PlayerBar, the left info column was a fixed w-72 (title kept
truncating) while the seek column was flex-1 (the scrubber hogged the slack
on wide screens). Let the left column grow up to max-w-md while holding its
288px floor at md, and cap the seek/transport column at max-w-xl centred, so
freed width flows to the title instead of stretching the bar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/lib/components/CompactTrackCard.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import { Plus } from 'lucide-svelte';
   import type { TrackRef } from '$lib/api/types';
   import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
   import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
   import TrackMenu from './TrackMenu.svelte';
-  import CardActionCluster from './CardActionCluster.svelte';
+  import LikeButton from './LikeButton.svelte';
 
   // Horizontal compact track row — cover thumb on the left, title +
   // artist on the right. Mirrors Android's CompactTrackTile so the
@@ -42,7 +43,7 @@
     type="button"
     aria-label={`Play ${track.title}`}
     onclick={onClick}
-    class="flex w-full items-center gap-2 rounded-md p-1 pr-12 text-left
+    class="flex w-full items-center gap-2 rounded-md p-1 pr-24 text-left
            hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"
   >
     <div class="h-12 w-12 flex-shrink-0 overflow-hidden rounded bg-surface-hover">
@@ -59,14 +60,29 @@
       <div class="truncate text-xs text-text-secondary">{track.artist_name}</div>
     </div>
   </button>
-  <CardActionCluster
-    likeEntityType="track"
-    likeEntityId={track.id}
-    onAdd={onAddToQueue}
-    addLabel={`Add ${track.title} to queue`}
+  <!-- Single inline cluster, vertically centred on the right. The shared
+       CardActionCluster splits Like+Add (top) and the menu (bottom) into
+       opposite corners — correct for the tall square Album/Artist cards but
+       it makes the two groups collide on this short one-line row. A compact
+       row keeps all three controls in one horizontal group instead. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="absolute right-2 top-1/2 z-10 flex -translate-y-1/2 items-center gap-0.5
+           opacity-0 transition-opacity duration-150
+           group-hover:opacity-100 focus-within:opacity-100"
+    onclick={(e) => e.stopPropagation()}
   >
-    {#snippet menu()}
-      <TrackMenu {track} />
-    {/snippet}
-  </CardActionCluster>
+    <LikeButton entityType="track" entityId={track.id} size="sm" />
+    <button
+      type="button"
+      aria-label={`Add ${track.title} to queue`}
+      onclick={onAddToQueue}
+      class="rounded-full bg-surface p-1 text-text-secondary hover:text-text-primary
+             focus-visible:ring-2 focus-visible:ring-accent"
+    >
+      <Plus size={16} strokeWidth={1} />
+    </button>
+    <TrackMenu {track} />
+  </div>
 </div>