From ed6d0936ca05a0e9915f10ee7685fc5118e1cd77 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 9 May 2026 20:18:32 -0400
Subject: [PATCH] feat(web): PlayerBar reflows to two-row layout below md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/lib/components/PlayerBar.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index 405e6690..a3c90121 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/web/src/lib/components/PlayerBar.svelte
@@ -15,6 +15,7 @@
   import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
   import LikeButton from './LikeButton.svelte';
   import TrackMenu from './TrackMenu.svelte';
+  import PlayerOverflowMenu from './PlayerOverflowMenu.svelte';
 
   const current = $derived(player.current);
 
@@ -48,9 +49,9 @@
 </script>
 
 {#if current}
-  <div class="flex min-h-[108px] items-center gap-4 border-t border-border bg-surface px-4 py-1.5">
+  <div class="flex flex-col md:flex-row md:min-h-[108px] min-h-[88px] md:items-center gap-2 md:gap-4 border-t border-border bg-surface px-3 md:px-4 py-2 md:py-1.5">
     <!-- Left: cover + title + artist + like + menu -->
-    <div class="flex w-72 min-w-0 items-center gap-3">
+    <div class="flex w-full md:w-72 min-w-0 items-center gap-3">
       <a
         href={`/albums/${current.album_id}`}
         aria-label="Open album"
@@ -59,7 +60,7 @@
         <img
           src={coverUrl(current.album_id)}
           alt=""
-          class="h-24 w-24 rounded-md object-cover"
+          class="h-10 w-10 md:h-24 md:w-24 rounded-md object-cover"
           onerror={onCoverError}
         />
       </a>
@@ -73,13 +74,14 @@
         </a>
         {#if player.queue.length > player.index + 1}
           {@const nextTrack = player.queue[player.index + 1]}
-          <span class="text-text-secondary text-xs truncate block">
+          <span class="text-text-secondary text-xs truncate hidden md:block">
             Next · {nextTrack.title} — {nextTrack.artist_name}
           </span>
         {/if}
       </div>
       <LikeButton entityType="track" entityId={current.id} />
       <TrackMenu track={current} direction="up" hideQueueActions />
+      <PlayerOverflowMenu direction="up" />
     </div>
 
     <!-- Center: seek row + transport row -->
@@ -138,7 +140,7 @@
         </div>
         <!-- Seek row -->
         <div class="flex items-center gap-3">
-          <span class="w-12 shrink-0 text-right text-xs tabular-nums text-text-secondary">
+          <span class="w-10 md:w-12 shrink-0 text-right text-[10px] md:text-xs tabular-nums text-text-secondary">
             {formatDuration(player.position)}
           </span>
           <input
@@ -151,7 +153,7 @@
             oninput={onSeekInput}
             class="flex-1 accent-accent"
           />
-          <span class="w-12 shrink-0 text-xs tabular-nums text-text-secondary">
+          <span class="w-10 md:w-12 shrink-0 text-[10px] md:text-xs tabular-nums text-text-secondary">
             {formatDuration(player.duration)}
           </span>
         </div>
@@ -159,7 +161,7 @@
     {/if}
 
     <!-- Right: shuffle + repeat + volume -->
-    <div class="flex w-60 items-center justify-end gap-2">
+    <div class="hidden md:flex w-60 items-center justify-end gap-2">
       <button
         type="button"
         aria-label="Shuffle"