diff --git a/client/src/app.html b/client/src/app.html
index 9a43ff5..058d986 100644
--- a/client/src/app.html
+++ b/client/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, interactive-widget=resizes-content" />
 		<meta name="theme-color" content="#f97316" />
 		<meta name="description" content="Spiceflow - AI Session Orchestration" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
diff --git a/client/src/routes/+layout.svelte b/client/src/routes/+layout.svelte
index e5cf5a5..51e5f14 100644
--- a/client/src/routes/+layout.svelte
+++ b/client/src/routes/+layout.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
 	import '../app.css';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { sessions } from '$lib/stores/sessions';
 	import { pushStore } from '$lib/stores/push';
 
+	let containerHeight = '100dvh';
+
+	function updateHeight() {
+		if (typeof window !== 'undefined' && window.visualViewport) {
+			// Use the visual viewport height to account for keyboard
+			containerHeight = `${window.visualViewport.height}px`;
+		}
+	}
+
 	onMount(() => {
 		sessions.load();
 		pushStore.init();
@@ -16,9 +25,21 @@
 				}
 			});
 		}
+
+		// Track visual viewport for keyboard handling
+		if (typeof window !== 'undefined' && window.visualViewport) {
+			updateHeight();
+			window.visualViewport.addEventListener('resize', updateHeight);
+		}
+	});
+
+	onDestroy(() => {
+		if (typeof window !== 'undefined' && window.visualViewport) {
+			window.visualViewport.removeEventListener('resize', updateHeight);
+		}
 	});
 </script>
 
-<div class="h-dvh flex flex-col bg-zinc-900 text-zinc-100 safe-top">
+<div class="flex flex-col bg-zinc-900 text-zinc-100 safe-top overflow-hidden" style="height: {containerHeight};">
 	<slot />
 </div>
