From e4b6024adee7540352cfd45ad4b3ee64afe20660 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Thu, 9 Apr 2026 09:45:17 -0600
Subject: [PATCH] fix(ui): remote indicator sits above player bar, not inside
 it

Moves the 'Controlling: X' banner from inside the now-playing-bar
to a fixed position above it (bottom: 104px). The player bar
keeps its 104px height unchanged. Main content area shrinks
slightly when the banner is visible.

cc
---
 src/lib/components/NowPlayingBar.svelte | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/NowPlayingBar.svelte b/src/lib/components/NowPlayingBar.svelte
index 49594f883..a49327677 100644
--- a/src/lib/components/NowPlayingBar.svelte
+++ b/src/lib/components/NowPlayingBar.svelte
@@ -265,14 +265,14 @@
   });
 </script>
 
+{#if $isRemoteMode}
+  <div class="remote-indicator">
+    <Monitor size={14} />
+    <span>{$t('player.controllingRemote', { values: { name: $playbackTarget.name || 'Remote' } })}</span>
+    <button class="remote-disconnect" onclick={disconnectFromRemote}>{$t('actions.disconnect')}</button>
+  </div>
+{/if}
 <div class="now-playing-bar">
-  {#if $isRemoteMode}
-    <div class="remote-indicator">
-      <Monitor size={14} />
-      <span>{$t('player.controllingRemote', { values: { name: $playbackTarget.name || 'Remote' } })}</span>
-      <button class="remote-disconnect" onclick={disconnectFromRemote}>{$t('actions.disconnect')}</button>
-    </div>
-  {/if}
   <!-- Top: Full-width Seekbar -->
   <div class="seekbar-container">
     <span class="time current">{formatTime(currentTime)}</span>
@@ -644,6 +644,10 @@
   }
 
   .remote-indicator {
+    position: fixed;
+    bottom: 104px;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -654,6 +658,7 @@
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.02em;
+    z-index: 2001;
   }
 
   .remote-disconnect {