more layout fixes

src/lib/components/player/PlayerRoot.svelte

@@ -92,7 +92,7 @@
 	<div class="lg:hidden w-full sticky bottom-0">
 		<PlayerMobile />
 	</div>
-	<div class="hidden lg:block h-full">
+	<div class="hidden lg:block sticky top-12 h-[calc(100dvh-4rem)]">
 		<PlayerDesktop />
 	</div>
 </div>

src/routes/+layout.svelte

@@ -18,17 +18,13 @@
 	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
 -->
 <div
-	class="min-h-dvh not-xl:min-w-[80dvw] lg:grid lg:grid-rows-[auto_1fr] gap-16 lg:grid-cols-[1fr_420px]"
+	class="min-h-dvh max-w-full not-xl:min-w-[80dvw] lg:grid lg:grid-rows-[auto_1fr] gap-16 lg:grid-cols-[1fr_420px]"
 >
 	<header
 		class="sticky top-0 z-40 border-b bg-background/80 backdrop-blur lg:col-span-2"
 	>
-		<div
+		<div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
-			class="mx-auto flex h-14 max-w-6xl items-center justify-between px-4"
+			<a href={resolve("/")} class="font-semibold tracking-tight">AMQ Train</a>
-		>
-			<a href={resolve("/")} class="font-semibold tracking-tight"
-				>AMQ Train</a
-			>
 
 			<nav class="flex items-center gap-2 text-sm">
 				<a href={resolve("/")}>Anime</a>
@@ -44,14 +40,14 @@
 
 	<!-- Desktop sidebar column (in normal flow) -->
 	<!-- PlayerRoot uses contents to inject its children into this grid -->
-</div>
+	<ClientOnly showFallback={false}>
-<ClientOnly showFallback={false}>
 		{#snippet children()}
 			<div class="contents">
 				<PlayerRoot />
 			</div>
 		{/snippet}
-</ClientOnly>
+	</ClientOnly>
+</div>
 
 <!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
      mounted in the desktop sidebar column above. -->