fix: chapter menu drawer — constrain width on desktop, fix scroll

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

@@ -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,6 +795,8 @@
 							</svg>
 						</Button>
 					</div>
+					<!-- Scrollable list -->
+					<div class="overflow-y-auto px-4">
 						{#each audioStore.chapters as ch (ch.number)}
 							<a
 								use:setIfActive={ch.number === audioStore.chapter}
@@ -816,6 +819,7 @@
 						{/each}
 					</div>
 				</div>
+			</div>
 		{/if}
 
 		<!-- Generation progress bar (sits at very top of the bar) -->