From 066616e196d38d4d35edaeca5dfdef0acf0a9f58 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 14 Jun 2026 21:36:26 -0400
Subject: [PATCH] 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>
---
 .../lib/components/CompactTrackCard.svelte    | 38 +++++++++++++------
 web/src/lib/components/PlayerBar.svelte       | 13 +++++--
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/CompactTrackCard.svelte b/web/src/lib/components/CompactTrackCard.svelte
index 2588bb7a..3452cc10 100644
--- a/web/src/lib/components/CompactTrackCard.svelte
+++ b/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>
diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index 30dc8ac4..bd9397c8 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/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