From d0efb3549bc16bb178f329e8193ff4f7de67006e Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 04:47:39 -0800
Subject: [PATCH] player layout improvements

---
 src/lib/components/GlobalPlayer.svelte | 126 +++++++++++++------------
 1 file changed, 65 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index ac7a8b8..ece3b5c 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -597,9 +597,10 @@
 		</div>
 
 		{#if snap.uiOpen}
-			<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3">
-				<div class="mx-auto max-w-4xl space-y-3">
-					<div class="flex flex-wrap items-center gap-2">
+			<div class="h-[65dvh] overflow-hidden border-t">
+				<div class="mx-auto flex h-full max-w-4xl flex-col px-3 py-3">
+					<!-- Controls stay visible while the queue scrolls -->
+					<div class="flex flex-wrap items-center gap-2 pb-3">
 						<button
 							class={[
 								"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
@@ -683,67 +684,72 @@
 						</label>
 					</div>
 
-					<div class="space-y-1">
-						<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
+					<!-- Scroll area: only the queue scrolls -->
+					<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+						<div class="space-y-1">
+							<div class="text-sm font-semibold">
+								Queue ({snap.queue.length})
+							</div>
 
-						{#if snap.queue.length === 0}
-							<p class="text-sm text-muted-foreground">Queue is empty.</p>
-						{:else}
-							<ul class="overflow-auto rounded border">
-								{#each queueDisplay as item (item.track.id)}
-									<li
-										class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
-									>
-										<button
-											class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
-											type="button"
-											onclick={() => {
-												jumpToTrack(item.track.id);
-												void syncAndAutoplay();
-											}}
+							{#if snap.queue.length === 0}
+								<p class="text-sm text-muted-foreground">Queue is empty.</p>
+							{:else}
+								<ul class="rounded border">
+									{#each queueDisplay as item (item.track.id)}
+										<li
+											class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
 										>
-											{#if item.isCurrent}
-												<span class="text-muted-foreground">▶ </span>
-											{/if}
-											<div class="min-w-0 flex-1">
-												<div
-													class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
-												>
-													{#if typeNumberLabel(item.track)}
-														<span
-															class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-														>
-															{typeNumberLabel(item.track)}
-														</span>
-													{/if}
-													<span class="truncate text-sm"
-														>{animeLabel(item.track)}</span
+											<button
+												class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
+												type="button"
+												onclick={() => {
+													jumpToTrack(item.track.id);
+													void syncAndAutoplay();
+												}}
+											>
+												{#if item.isCurrent}
+													<span class="text-muted-foreground">▶ </span>
+												{/if}
+												<div class="min-w-0 flex-1">
+													<div
+														class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
 													>
-												</div>
+														{#if typeNumberLabel(item.track)}
+															<span
+																class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+															>
+																{typeNumberLabel(item.track)}
+															</span>
+														{/if}
+														<span class="truncate text-sm"
+															>{animeLabel(item.track)}</span
+														>
+													</div>
 
-												<div class="mt-1 text-foreground/80">
-													{(item.track.title ?? "").trim() || "Unknown title"}
-													<span class="text-sm text-muted-foreground">
-														— {(item.track.artist ?? "").trim() ||
-															"Unknown Artist"}
-													</span>
+													<div class="mt-1 text-foreground/80">
+														{(item.track.title ?? "").trim() || "Unknown title"}
+														<span class="text-sm text-muted-foreground">
+															— {(item.track.artist ?? "").trim() ||
+																"Unknown Artist"}
+														</span>
+													</div>
 												</div>
-											</div>
-										</button>
+											</button>
 
-										<button
-											class="inline-flex h-8 w-8 items-center justify-center rounded border"
-											type="button"
-											onclick={() => removeTrack(item.track.id)}
-											aria-label="Remove from queue"
-											title="Remove from queue"
-										>
-											<ListX class="h-4 w-4" />
-										</button>
-									</li>
-								{/each}
-							</ul>
-						{/if}
+											<button
+												class="inline-flex h-8 w-8 items-center justify-center rounded border"
+												type="button"
+												onclick={() => removeTrack(item.track.id)}
+												aria-label="Remove from queue"
+												title="Remove from queue"
+											>
+												<ListX class="h-4 w-4" />
+											</button>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -753,12 +759,10 @@
 
 <!-- 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"
+	class="hidden lg:flex sticky top-12 h-[calc(100dvh-4rem)] overflow-hidden bg-background flex-col"
 >
 	<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>
-
 			{#if snap.currentTrack}
 				<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
 					{#if typeNumberLabel(snap.currentTrack)}