fix: use flex layout in voice mode to prevent page scroll competing with xterm

This commit is contained in:
Gan, Jimmy
2026-02-26 16:57:29 +08:00
parent 643d576816
commit d25b3f0785
@@ -100,7 +100,7 @@
onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); })); onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
</script> </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} {#if !activeVoice()?.voiceMode}
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1> <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
{/if} {/if}
@@ -166,18 +166,18 @@
{/if} {/if}
{#each tabs as tab (tab.id)} {#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 <div
use:initTerminal={tab} use:initTerminal={tab}
class="rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300" class="h-full rounded-xl overflow-hidden shadow-lg border border-surface-700 transition-all duration-300"
style="background: #0f172a; height: calc(100vh - {activeVoice()?.voiceMode ? '19rem' : '10rem'});" style="background: #0f172a; {activeVoice()?.voiceMode ? '' : 'height: calc(100vh - 10rem);'}"
></div> ></div>
</div> </div>
{/each} {/each}
{#if activeVoice()?.voiceMode} {#if activeVoice()?.voiceMode}
{@const v = activeVoice()} {@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 --> <!-- Header -->
<div class="flex items-center justify-between px-3 py-1.5 border-b border-surface-700/50"> <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> <span class="text-xs font-medium text-surface-300">Voice Mode</span>