finally synced

src/lib/components/GlobalPlayer.svelte

@@ -34,6 +34,7 @@
 		type PlayerSnapshot,
 	} from "$lib/player/player.svelte";
 	import { createMediaSessionBindings } from "$lib/player/media-session";
+	import Portal from "$lib/components/util/Portal.svelte";
 
 	import {
 		ChevronsUpDown,
@@ -453,11 +454,13 @@
 	{/if}
 </svelte:head>
 
-<!-- Mobile UI is allowed to render as an overlay even if this component is mounted
-     inside the desktop sidebar column. We hide it on lg+ via CSS, not by unmounting. -->
-<div
+<!-- Mobile UI is portaled to document.body so the GlobalPlayer can be mounted
+     in the desktop sidebar column while still showing the mobile overlay.
+     Hidden on lg+ via CSS. -->
+<Portal>
+	<div
 		class="lg:hidden fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl"
->
+	>
 		<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
 			<button
 				class="inline-flex h-8 w-8 items-center justify-center rounded border"
@@ -623,7 +626,9 @@
 								step="0.01"
 								value={snap.volume}
 								oninput={(e) =>
-								setVolume(Number((e.currentTarget as HTMLInputElement).value))}
+									setVolume(
+										Number((e.currentTarget as HTMLInputElement).value),
+									)}
 							/>
 						</label>
 					</div>
@@ -693,7 +698,9 @@
 				</div>
 			</div>
 		{/if}
-</div>
+	</div>
+</Portal>
+
 <!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. -->
 <aside
 	class="hidden lg:flex sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex-col"

src/routes/+layout.svelte

@@ -31,5 +31,5 @@
 	</aside>
 </div>
 
-<!-- Mobile player is rendered by the same GlobalPlayer instance above.
-     On small screens, it uses fixed positioning internally so it can overlay. -->
+<!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
+     mounted in the desktop sidebar column above. -->