global player pt. 11 fix hiding sidebar

src/lib/components/GlobalPlayer.svelte

@@ -522,10 +522,25 @@
 		{/if}
 	</div>
 {:else}
-	<!-- Desktop: right sidebar, collapsible -->
+	<!-- Desktop: in-flow right column, collapsible -->
-	<aside
+	<div
-		class="fixed right-0 top-0 z-40 h-dvh w-85 border-l bg-background/95 backdrop-blur"
+		class="pointer-events-none fixed inset-y-0 right-0 z-30 flex justify-end"
 	>
+		<!-- Spacer only: reserved width when open so page content doesn't sit under the sidebar -->
+		{#if snap.uiOpen}
+			<div class="pointer-events-none w-[340px]"></div>
+		{/if}
+	</div>
+
+	<aside
+		class="fixed right-0 top-0 z-40 h-dvh border-l bg-background/95 backdrop-blur transition-[width,transform] duration-200"
+		style={snap.uiOpen
+			? "width: 340px; transform: translateX(0);"
+			: "width: 0px; transform: translateX(100%);"}
+		aria-hidden={!snap.uiOpen}
+	>
+		<!-- Keep header visible only when open -->
+		{#if snap.uiOpen}
 			<div class="flex items-center gap-2 border-b px-3 py-3">
 				<div class="min-w-0 flex-1">
 					<div class="truncate text-sm font-semibold">Player</div>
@@ -533,17 +548,8 @@
 						{nowPlayingLabel()}
 					</div>
 				</div>
-
-			<button
-				class="rounded border px-2 py-1 text-sm"
-				type="button"
-				onclick={() => setUiOpen(!snap.uiOpen)}
-			>
-				{snap.uiOpen ? "Hide" : "Show"}
-			</button>
 			</div>
 
-		{#if uiVisible}
 			<div class="flex h-[calc(100dvh-49px)] flex-col">
 				<div class="space-y-2 px-3 py-3">
 					<div class="flex items-center justify-between gap-2">
@@ -666,8 +672,15 @@
 		{/if}
 	</aside>
 
-	<!-- Offset page content so it doesn't sit under the sidebar -->
+	<!-- Toggle button lives outside the sidebar so it still works when hidden -->
-	<div class="pointer-events-none fixed right-0 top-0 h-dvh w-85"></div>
+	<button
+		type="button"
+		class="fixed right-3 top-3 z-50 rounded border bg-background/95 px-2 py-1 text-sm backdrop-blur"
+		onclick={() => toggleUiOpen()}
+		aria-label={snap.uiOpen ? "Hide player" : "Show player"}
+	>
+		{snap.uiOpen ? "Hide" : "Show"}
+	</button>
 {/if}
 
 <!-- Single global audio element (hidden but functional) -->