From 75cac363fc78b95e13234d4d8f73dd6e0a63d52a Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Tue, 7 Apr 2026 17:54:49 +0500
Subject: [PATCH] fix: chapter/voice modals in ListeningMode use fixed inset-0
 with safe-area insets to fill full screen

---
 ui/src/lib/components/ListeningMode.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/src/lib/components/ListeningMode.svelte b/ui/src/lib/components/ListeningMode.svelte
index ff49b16..8a00c09 100644
--- a/ui/src/lib/components/ListeningMode.svelte
+++ b/ui/src/lib/components/ListeningMode.svelte
@@ -373,11 +373,11 @@
 	{#if showVoiceModal && voices.length > 0}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="absolute inset-0 z-70 flex flex-col"
+			class="fixed inset-0 z-[80] flex flex-col"
 			style="background: var(--color-surface);"
 		>
 			<!-- Modal header -->
-			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0" style="padding-top: max(0.75rem, env(safe-area-inset-top));">
 				<button
 					type="button"
 					onclick={() => { stopSample(); showVoiceModal = false; voiceSearch = ''; }}
@@ -405,7 +405,7 @@
 				</div>
 			</div>
 			<!-- Voice list -->
-			<div class="flex-1 overflow-y-auto">
+			<div class="flex-1 overflow-y-auto overscroll-contain" style="padding-bottom: env(safe-area-inset-bottom);">
 				{#each ([['Kokoro', filteredKokoro], ['Pocket TTS', filteredPocket], ['CF AI', filteredCfai]] as [string, Voice[]][]) as [label, group]}
 					{#if group.length > 0}
 						<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider px-4 py-2 sticky top-0 bg-(--color-surface) border-b border-(--color-border)/50">{label}</p>
@@ -454,8 +454,11 @@
 	<!-- Chapter modal (full-screen overlay) -->
 	{#if showChapterModal && audioStore.chapters.length > 0}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="absolute inset-0 z-70 flex flex-col" style="background: var(--color-surface);">
-			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+		<div
+			class="fixed inset-0 z-[80] flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0" style="padding-top: max(0.75rem, env(safe-area-inset-top));">
 				<button
 					type="button"
 					onclick={() => { showChapterModal = false; }}
@@ -481,7 +484,7 @@
 					/>
 				</div>
 			</div>
-			<div class="flex-1 overflow-y-auto">
+			<div class="flex-1 overflow-y-auto overscroll-contain" style="padding-bottom: env(safe-area-inset-bottom);">
 				{#each filteredChapters as ch (ch.number)}
 					<button
 						type="button"