diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 6e96d3831..026186a66 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -45,21 +45,6 @@
 </script>
 
 {#if !largeScreen}
-	{#if show}
-		<Drawer bind:show>
-			<div class="  px-6 py-4 h-full">
-				<Controls
-					on:close={() => {
-						show = false;
-					}}
-					{models}
-					bind:chatFiles
-					bind:params
-				/>
-			</div>
-		</Drawer>
-	{/if}
-
 	{#if $showCallOverlay}
 		<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
 			<div
@@ -78,6 +63,19 @@
 				/>
 			</div>
 		</div>
+	{:else if show}
+		<Drawer bind:show>
+			<div class="  px-6 py-4 h-full">
+				<Controls
+					on:close={() => {
+						show = false;
+					}}
+					{models}
+					bind:chatFiles
+					bind:params
+				/>
+			</div>
+		</Drawer>
 	{/if}
 {:else if show}
 	<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
diff --git a/src/lib/components/common/Drawer.svelte b/src/lib/components/common/Drawer.svelte
index e638f0f07..638175ea6 100644
--- a/src/lib/components/common/Drawer.svelte
+++ b/src/lib/components/common/Drawer.svelte
@@ -60,7 +60,7 @@
 
 <div
 	bind:this={modalElement}
-	class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
+	class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[9999] overflow-hidden overscroll-contain"
 	in:fly={{ y: 100, duration: 100 }}
 	on:mousedown={() => {
 		show = false;
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
index 4850a4b5e..cc8fc304b 100644
--- a/src/lib/components/common/Modal.svelte
+++ b/src/lib/components/common/Modal.svelte
@@ -61,7 +61,7 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={modalElement}
-		class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
+		class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[9999] overflow-hidden overscroll-contain"
 		in:fade={{ duration: 10 }}
 		on:mousedown={() => {
 			show = false;