diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index 748b755d..5f22633b 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/web/src/lib/components/PlayerBar.svelte
@@ -59,7 +59,10 @@
     Play controls maintain 40/48/40 size; like+kebab and column-3 sub-rows
     are shorter so column 2's bottom edge aligns with column 3's bottom.
   -->
-  <div class="md:hidden flex flex-col gap-1.5 border-t border-border bg-surface px-3 py-2">
+  <div
+    data-testid="player-bar-compact"
+    class="md:hidden flex flex-col gap-1.5 border-t border-border bg-surface px-3 py-2"
+  >
     {#if player.state === 'error'}
       <div role="alert" class="flex items-center justify-center gap-3 text-sm text-text-primary">
         <span>{player.error ?? 'Playback failed.'}</span>
@@ -219,7 +222,10 @@
     the redundant PlayerOverflowMenu kebab is no longer mounted (volume,
     shuffle, repeat, queue all live inline in the right cluster).
   -->
-  <div 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">
+  <div
+    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">
       <a