From 82846c9fcd62e38bcb2b94881f6dc74bde97a274 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 21:52:39 -0400
Subject: [PATCH] fix(web/m7-364): align queue toggle styling with sibling
 toggles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Queue toggle active class: bg-accent-tint text-accent (matches shuffle/repeat)
- ListMusic icon size: 20 → 18 (matches siblings)
- Right-side container width: w-48 → w-60 (accommodates 4 buttons + volume)
---
 web/src/lib/components/PlayerBar.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index 062fb2f4..ad5fb492 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/web/src/lib/components/PlayerBar.svelte
@@ -159,7 +159,7 @@
     {/if}
 
     <!-- Right: shuffle + repeat + volume -->
-    <div class="flex w-48 items-center justify-end gap-2">
+    <div class="flex w-60 items-center justify-end gap-2">
       <button
         type="button"
         aria-label="Shuffle"
@@ -191,10 +191,10 @@
         aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
         aria-pressed={player.queueDrawerOpen}
         class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
-          ? 'bg-action-secondary text-action-fg'
+          ? 'bg-accent-tint text-accent'
           : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
       >
-        <ListMusic size={20} strokeWidth={1.5} />
+        <ListMusic size={18} strokeWidth={1.5} />
       </button>
       <label class="flex items-center gap-1.5">
         <span class="sr-only">Volume</span>