From fc0f04f29c164bea9362ce9ec0fe50e1effcda42 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Tue, 10 Feb 2026 03:53:53 -0800
Subject: [PATCH] more layout fixes

---
 src/lib/components/player/PlayerRoot.svelte |  2 +-
 src/routes/+layout.svelte                   | 24 +++++++++------------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/player/PlayerRoot.svelte b/src/lib/components/player/PlayerRoot.svelte
index 2559ede..bca01e8 100644
--- a/src/lib/components/player/PlayerRoot.svelte
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2573279..ed825a2 100644
--- a/src/routes/+layout.svelte
+++ b/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
-			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
-			>
+		<div 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>
 
 			<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 -->
+	<ClientOnly showFallback={false}>
+		{#snippet children()}
+			<div class="contents">
+				<PlayerRoot />
+			</div>
+		{/snippet}
+	</ClientOnly>
 </div>
-<ClientOnly showFallback={false}>
-	{#snippet children()}
-		<div class="contents">
-			<PlayerRoot />
-		</div>
-	{/snippet}
-</ClientOnly>
 
 <!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
      mounted in the desktop sidebar column above. -->