global player pt. 12 sidebar shenanigans

src/lib/components/GlobalPlayer.svelte

@@ -522,34 +522,27 @@
 		{/if}
 	</div>
 {:else}
-	<!-- Desktop: in-flow right column, collapsible -->
+	<!-- Desktop: in-flow sidebar (this component is rendered inside a layout column on lg+) -->
-	<div
+	<aside class="h-dvh bg-background">
-		class="pointer-events-none fixed inset-y-0 right-0 z-30 flex justify-end"
+		<div class="flex items-center gap-2 border-b px-3 py-3">
-	>
+			<div class="min-w-0 flex-1">
-		<!-- Spacer only: reserved width when open so page content doesn't sit under the sidebar -->
+				<div class="truncate text-sm font-semibold">Player</div>
-		{#if snap.uiOpen}
+				<div class="truncate text-xs text-muted-foreground">
-			<div class="pointer-events-none w-[340px]"></div>
+					{nowPlayingLabel()}
-		{/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>
-					<div class="truncate text-xs text-muted-foreground">
-						{nowPlayingLabel()}
-					</div>
 				</div>
 			</div>
 
+			<button
+				class="rounded border px-2 py-1 text-sm"
+				type="button"
+				onclick={() => toggleUiOpen()}
+				aria-label={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
+			>
+				{snap.uiOpen ? "Hide" : "Show"}
+			</button>
+		</div>
+
+		{#if snap.uiOpen}
 			<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">
@@ -671,16 +664,6 @@
 			</div>
 		{/if}
 	</aside>
-
-	<!-- Toggle button lives outside the sidebar so it still works when hidden -->
-	<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) -->

src/routes/+layout.svelte

@@ -10,9 +10,32 @@
 <svelte:head
 	><link rel="icon" href={favicon} /><title>AMQ Train</title></svelte:head
 >
-{@render children()}
+
-<ClientOnly showFallback={false}>
+<!--
-	{#snippet children()}
+	App shell:
-		<GlobalPlayer />
+	- Mobile/tablet: single column, player renders client-only (mobile bar/drawer)
-	{/snippet}
+	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
-</ClientOnly>
+-->
+<div class="min-h-dvh lg:grid gap-16 lg:grid-cols-[1fr_340px]">
+	<main>
+		{@render children()}
+	</main>
+
+	<!-- Desktop sidebar column (in normal flow) -->
+	<aside class="hidden lg:block">
+		<ClientOnly showFallback={false}>
+			{#snippet children()}
+				<GlobalPlayer />
+			{/snippet}
+		</ClientOnly>
+	</aside>
+</div>
+
+<!-- Mobile player (client-only, overlays via fixed positioning inside GlobalPlayer) -->
+<div class="lg:hidden">
+	<ClientOnly showFallback={false}>
+		{#snippet children()}
+			<GlobalPlayer />
+		{/snippet}
+	</ClientOnly>
+</div>