From d25b3f0785d050874d3d411235bcc422a7d46674 Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Thu, 26 Feb 2026 16:57:29 +0800
Subject: [PATCH] fix: use flex layout in voice mode to prevent page scroll
 competing with xterm

---
 dashboard/frontend/src/routes/Terminal.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/dashboard/frontend/src/routes/Terminal.svelte b/dashboard/frontend/src/routes/Terminal.svelte
index e86ec39..03c92ea 100644
--- a/dashboard/frontend/src/routes/Terminal.svelte
+++ b/dashboard/frontend/src/routes/Terminal.svelte
@@ -100,7 +100,7 @@
 
   onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
 </script>
-<div class={activeVoice()?.voiceMode ? 'space-y-1' : 'space-y-2'}>
+<div class={activeVoice()?.voiceMode ? 'flex flex-col h-[calc(100vh-4rem)] overflow-hidden gap-1' : 'space-y-2'}>
   {#if !activeVoice()?.voiceMode}
     <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
   {/if}
@@ -166,18 +166,18 @@
   {/if}
 
   {#each tabs as tab (tab.id)}
-    <div class={activeTab === tab.id ? '' : 'hidden'}>
+    <div class="{activeTab === tab.id ? '' : 'hidden'} {activeVoice()?.voiceMode ? 'flex-1 min-h-0' : ''}">
       <div
         use:initTerminal={tab}
-        class="rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300"
-        style="background: #0f172a; height: calc(100vh - {activeVoice()?.voiceMode ? '19rem' : '10rem'});"
+        class="h-full rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300"
+        style="background: #0f172a; {activeVoice()?.voiceMode ? '' : 'height: calc(100vh - 10rem);'}"
       ></div>
     </div>
   {/each}
 
   {#if activeVoice()?.voiceMode}
     {@const v = activeVoice()}
-    <div class="mt-1 rounded-xl bg-surface-800/95 border border-surface-700 shadow-xl overflow-hidden animate-slide-up">
+    <div class="mt-1 shrink-0 rounded-xl bg-surface-800/95 border border-surface-700 shadow-xl overflow-hidden animate-slide-up">
       <!-- Header -->
       <div class="flex items-center justify-between px-3 py-1.5 border-b border-surface-700/50">
         <span class="text-xs font-medium text-surface-300">Voice Mode</span>