diff --git a/web/src/lib/components/chat/Chat.svelte b/web/src/lib/components/chat/Chat.svelte
index 8958aabe..2b5c99fb 100644
--- a/web/src/lib/components/chat/Chat.svelte
+++ b/web/src/lib/components/chat/Chat.svelte
@@ -155,7 +155,7 @@
   $: showObsidian = $featureFlags.enableObsidianIntegration;
 </script>
 
-<div class="chat-container flex gap-0 p-2 w-full h-screen">
+<div class="chat-container flex h-full min-h-0 w-full gap-0 p-2">
   <!-- Left Column -->
   <aside class="flex flex-col gap-2 pr-2 left-column" style="width: {leftColumnWidth}%">
     <!-- Dropdowns Group with Model Config -->
diff --git a/web/src/lib/components/chat/Chat.test.ts b/web/src/lib/components/chat/Chat.test.ts
new file mode 100644
index 00000000..1b7ba593
--- /dev/null
+++ b/web/src/lib/components/chat/Chat.test.ts
@@ -0,0 +1,11 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+const source = readFileSync(new URL('./Chat.svelte', import.meta.url), 'utf8');
+
+describe('Chat viewport layout', () => {
+  it('fits the route viewport instead of extending to the full screen height', () => {
+    expect(source).toMatch(/class="chat-container[^"]*\bh-full\b[^"]*\bmin-h-0\b/);
+    expect(source).not.toMatch(/class="chat-container[^"]*\bh-screen\b/);
+  });
+});