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/PlayerBar.svelte

@@ -272,8 +272,12 @@
     data-testid="player-bar-desktop"
     class="hidden md:flex md:flex-row md:min-h-[108px] md:items-center md:gap-4 border-t border-border bg-surface md:px-4 md:py-1.5"
   >
-    <!-- Left: cover + title + artist + like + menu -->
-    <div class="flex w-72 min-w-0 items-center gap-3">
+    <!-- Left: cover + title + artist + like + menu.
+         basis-72 grow max-w-md: holds its 288px floor at the md breakpoint
+         (where the seek column is the flex-1 that absorbs the remainder), but
+         on wider screens it grows up to 448px instead of leaving the title
+         truncated while the seek bar hogs the slack. -->
+    <div class="flex basis-72 grow max-w-md min-w-0 items-center gap-3">
       <a
         href="/now-playing"
         aria-label="Open now playing"
@@ -318,7 +322,10 @@
         </button>
       </div>
     {:else}
-      <div class="flex flex-1 flex-col items-stretch gap-2">
+      <!-- max-w-xl + mx-auto caps the seek bar (and the transport row) at
+           576px and centres it, so on wide screens the extra width flows to
+           the title column on the left rather than stretching the scrubber. -->
+      <div class="flex flex-1 flex-col items-stretch gap-2 mx-auto w-full max-w-xl">
         <!-- Transport row -->
         <div class="flex items-center justify-center gap-3">
           <button