From 15a31a5c6436bc30b40e55757bc80d73986f30d6 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 5 Apr 2026 14:35:03 +0500
Subject: [PATCH] =?UTF-8?q?fix:=20chapter=20menu=20drawer=20=E2=80=94=20co?=
 =?UTF-8?q?nstrain=20width=20on=20desktop,=20fix=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On md+ screens the drawer is now right-aligned and 320px wide (w-80)
instead of full-viewport-width. The sticky header is pulled out of the
scroll container so it never scrolls away, and overflow-y-auto is
applied only to the chapter list itself so both mobile and desktop can
scroll through long chapter lists.
---
 ui/src/routes/+layout.svelte | 50 +++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 2c7fc83..afc6e32 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -778,9 +778,10 @@
 
 		<!-- Chapter list drawer (slides up above the mini-bar) -->
 		{#if chapterDrawerOpen && audioStore.chapters.length > 0}
-			<div class="border-b border-(--color-border) bg-(--color-surface) max-h-[32rem] overflow-y-auto">
-				<div class="max-w-6xl mx-auto px-4">
-					<div class="flex items-center justify-between py-2 border-b border-(--color-border) sticky top-0 bg-(--color-surface)">
+			<div class="border-b border-(--color-border) bg-(--color-surface) flex justify-center md:justify-end md:pr-4">
+				<div class="w-full md:w-80 flex flex-col max-h-72">
+					<!-- Sticky header -->
+					<div class="flex items-center justify-between px-4 py-2 border-b border-(--color-border) shrink-0">
 						<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">{m.player_chapters()}</span>
 						<Button
 							variant="ghost"
@@ -794,26 +795,29 @@
 							</svg>
 						</Button>
 					</div>
-					{#each audioStore.chapters as ch (ch.number)}
-						<a
-							use:setIfActive={ch.number === audioStore.chapter}
-							href="/books/{audioStore.slug}/chapters/{ch.number}"
-							onclick={() => (chapterDrawerOpen = false)}
-							class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-(--color-text) {ch.number === audioStore.chapter
-								? 'text-(--color-brand) font-semibold'
-								: 'text-(--color-muted)'}"
-						>
-							<span class="tabular-nums text-(--color-muted) opacity-60 w-8 shrink-0 text-right">
-								{ch.number}
-							</span>
-							<span class="truncate">{ch.title || m.player_chapter_n({ n: String(ch.number) })}</span>
-							{#if ch.number === audioStore.chapter}
-								<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M8 5v14l11-7z"/>
-								</svg>
-							{/if}
-						</a>
-					{/each}
+					<!-- Scrollable list -->
+					<div class="overflow-y-auto px-4">
+						{#each audioStore.chapters as ch (ch.number)}
+							<a
+								use:setIfActive={ch.number === audioStore.chapter}
+								href="/books/{audioStore.slug}/chapters/{ch.number}"
+								onclick={() => (chapterDrawerOpen = false)}
+								class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-(--color-text) {ch.number === audioStore.chapter
+									? 'text-(--color-brand) font-semibold'
+									: 'text-(--color-muted)'}"
+							>
+								<span class="tabular-nums text-(--color-muted) opacity-60 w-8 shrink-0 text-right">
+									{ch.number}
+								</span>
+								<span class="truncate">{ch.title || m.player_chapter_n({ n: String(ch.number) })}</span>
+								{#if ch.number === audioStore.chapter}
+									<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+										<path d="M8 5v14l11-7z"/>
+									</svg>
+								{/if}
+							</a>
+						{/each}
+					</div>
 				</div>
 			</div>
 		{/if}