From 06b907d228796adeba7dd252592e1f9d6671db40 Mon Sep 17 00:00:00 2001
From: zerob13 <zerob13@gmail.com>
Date: Thu, 9 Apr 2026 14:22:19 +0800
Subject: [PATCH] fix(sidepanel): fill artifact viewer height

---
 src/renderer/src/App.vue                      |   6 +-
 .../src/components/artifacts/HTMLArtifact.vue |  49 +++---
 .../components/artifacts/MermaidArtifact.vue  |  22 +--
 .../components/artifacts/ReactArtifact.vue    |   5 +-
 .../src/components/artifacts/SvgArtifact.vue  |  67 +++-----
 .../components/sidepanel/ChatSidePanel.vue    |   4 +-
 .../components/sidepanel/WorkspacePanel.vue   |   4 +-
 .../components/sidepanel/WorkspaceViewer.vue  |  14 +-
 .../sidepanel/viewer/WorkspaceCodePane.vue    |  72 ++++++++-
 .../sidepanel/viewer/WorkspaceInfoPane.vue    |   5 +-
 .../sidepanel/viewer/WorkspacePreviewPane.vue | 149 ++++++++++--------
 src/renderer/src/views/ChatTabView.vue        |   4 +-
 test/renderer/components/HTMLArtifact.test.ts |  23 ++-
 .../components/MermaidArtifact.test.ts        |  43 ++++-
 .../renderer/components/ReactArtifact.test.ts |  28 ++++
 test/renderer/components/SvgArtifact.test.ts  |  51 ++++++
 .../components/WorkspacePreviewPane.test.ts   |  62 +++++++-
 .../components/WorkspaceViewer.test.ts        |  12 ++
 18 files changed, 451 insertions(+), 169 deletions(-)
 create mode 100644 test/renderer/components/ReactArtifact.test.ts
 create mode 100644 test/renderer/components/SvgArtifact.test.ts

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index accc1ca09..928eeeb6c 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -428,9 +428,11 @@ onBeforeUnmount(() => {
 
         <!-- Main content area -->
         <div
-          class="flex-1 min-w-0 bg-background overflow-hidden rounded-tl-xl border-black/20 dark:border-white/10 border-l border-t"
+          class="flex h-full min-h-0 flex-1 min-w-0 flex-col overflow-hidden rounded-tl-xl border-l border-t border-black/20 bg-background dark:border-white/10"
         >
-          <RouterView v-if="isStartupRouteReady" />
+          <div class="min-h-0 flex-1">
+            <RouterView v-if="isStartupRouteReady" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/renderer/src/components/artifacts/HTMLArtifact.vue b/src/renderer/src/components/artifacts/HTMLArtifact.vue
index 6c784b53a..0ee4de172 100644
--- a/src/renderer/src/components/artifacts/HTMLArtifact.vue
+++ b/src/renderer/src/components/artifacts/HTMLArtifact.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="w-full h-full overflow-auto">
-    <div
-      class="relative w-full h-full"
-      :class="viewportSize !== 'desktop' ? 'flex items-center justify-center' : ''"
-    >
-      <div :class="viewportSize === 'desktop' ? 'relative w-full h-full' : 'relative'">
-        <iframe
-          ref="iframeRef"
-          :srcdoc="block.content"
-          :class="viewportClasses"
-          :style="viewportStyles"
-          sandbox="allow-scripts allow-same-origin"
-        ></iframe>
-      </div>
+  <div :class="containerClasses" data-testid="html-artifact-root">
+    <div :class="frameContainerClasses">
+      <iframe
+        ref="iframeRef"
+        :srcdoc="block.content"
+        :class="viewportClasses"
+        :style="viewportStyles"
+        sandbox="allow-scripts allow-same-origin"
+        data-testid="html-artifact-iframe"
+      ></iframe>
     </div>
   </div>
 </template>
@@ -39,9 +35,26 @@ const props = defineProps<{
 }>()
 
 const iframeRef = ref<HTMLIFrameElement>()
+const resolvedViewportSize = computed(() => props.viewportSize || 'desktop')
+
+const containerClasses = computed(() => {
+  if (resolvedViewportSize.value === 'desktop') {
+    return 'flex h-full min-h-0 w-full overflow-hidden'
+  }
+
+  return 'flex h-full min-h-0 w-full items-center justify-center overflow-auto'
+})
+
+const frameContainerClasses = computed(() => {
+  if (resolvedViewportSize.value === 'desktop') {
+    return 'h-full min-h-0 w-full'
+  }
+
+  return 'relative shrink-0'
+})
 
 const viewportClasses = computed(() => {
-  const size = props.viewportSize || 'desktop'
+  const size = resolvedViewportSize.value
   const baseClasses = 'html-iframe-wrapper transition-all duration-300 ease-in-out'
 
   switch (size) {
@@ -49,12 +62,12 @@ const viewportClasses = computed(() => {
     case 'tablet':
       return `${baseClasses} border border-gray-300 dark:border-gray-600 relative`
     default:
-      return `${baseClasses} w-full h-full`
+      return `${baseClasses} block h-full min-h-0 w-full`
   }
 })
 
 const viewportStyles = computed(() => {
-  const size = props.viewportSize || 'desktop'
+  const size = resolvedViewportSize.value
 
   if (size === 'mobile' || size === 'tablet') {
     const dimensions = VIEWPORT_SIZES[size]
@@ -75,7 +88,7 @@ const setupIframe = () => {
       if (!doc) return
 
       // Add viewport meta tag
-      const viewportSize = props.viewportSize || 'desktop'
+      const viewportSize = resolvedViewportSize.value
       let viewportContent = 'width=device-width, initial-scale=1.0'
 
       if (viewportSize === 'mobile' || viewportSize === 'tablet') {
diff --git a/src/renderer/src/components/artifacts/MermaidArtifact.vue b/src/renderer/src/components/artifacts/MermaidArtifact.vue
index 38ed4182d..3f169be1f 100644
--- a/src/renderer/src/components/artifacts/MermaidArtifact.vue
+++ b/src/renderer/src/components/artifacts/MermaidArtifact.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="w-full h-full flex flex-col overflow-hidden">
+  <div
+    class="flex h-full min-h-0 w-full flex-col overflow-hidden"
+    data-testid="mermaid-artifact-root"
+  >
     <div
       v-if="props.isPreview"
       ref="mermaidRef"
-      class="w-full h-full p-4 overflow-auto flex items-center justify-center [&_svg]:!w-full [&_svg]:!h-full [&_svg]:max-h-[calc(100vh-120px)] [&_svg]:object-contain"
+      class="flex h-full min-h-0 w-full flex-1 items-center justify-center overflow-auto p-4 [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:h-auto [&_svg]:w-auto"
+      data-testid="mermaid-artifact-preview"
     ></div>
-    <div v-else class="h-full p-4">
+    <div v-else class="h-full min-h-0 p-4">
       <pre
-        class="rounded-lg bg-muted p-4 h-full m-0 overflow-auto"
+        class="m-0 h-full min-h-0 overflow-auto rounded-lg bg-muted p-4"
       ><code class="font-mono text-sm leading-6 h-full block">{{ props.block.content }}</code></pre>
     </div>
   </div>
@@ -52,17 +56,17 @@ const sanitizeMermaidContent = (content: string): string => {
     /<iframe[^>]*>[\s\S]*?<\/iframe>/gi,
     // Object 和 Embed 标签 - 可以执行代码
     /<object[^>]*>[\s\S]*?<\/object>/gi,
-    /<embed[^>]*[^>]*>/gi,
+    /<embed\b(?:"[^"]*"|'[^']*'|[^'">])*?>/gi,
     // Form 标签 - 可能用于 CSRF
     /<form[^>]*>[\s\S]*?<\/form>/gi,
     // Link 标签 - 可能加载恶意样式或脚本
-    /<link[^>]*>/gi,
+    /<link\b(?:"[^"]*"|'[^']*'|[^'">])*?>/gi,
     // Style 标签 - 可能包含恶意 CSS
     /<style[^>]*>[\s\S]*?<\/style>/gi,
     // Meta 标签 - 可能用于重定向或执行
-    /<meta[^>]*>/gi,
+    /<meta\b(?:"[^"]*"|'[^']*'|[^'">])*?>/gi,
     // Img 标签 - PoC 中使用的攻击向量，带事件处理器特别危险
-    /<img[^>]*>/gi
+    /<img\b(?:"[^"]*"|'[^']*'|[^'">])*?>/gi
   ]
 
   // 移除危险标签
@@ -72,7 +76,7 @@ const sanitizeMermaidContent = (content: string): string => {
 
   // 移除所有事件处理器属性 (on* 属性)
   // 这包括 onerror, onclick, onload, onmouseover 等
-  sanitized = sanitized.replace(/on\w+\s*=\s*["'][^"']*["']/gi, '')
+  sanitized = sanitized.replace(/on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
 
   // 移除危险的协议
   const dangerousProtocols = [/javascript\s*:/gi, /vbscript\s*:/gi, /data\s*:\s*text\/html/gi]
diff --git a/src/renderer/src/components/artifacts/ReactArtifact.vue b/src/renderer/src/components/artifacts/ReactArtifact.vue
index 8e04f95ae..a2d807756 100644
--- a/src/renderer/src/components/artifacts/ReactArtifact.vue
+++ b/src/renderer/src/components/artifacts/ReactArtifact.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="w-full h-full overflow-auto">
+  <div class="flex h-full min-h-0 w-full overflow-hidden" data-testid="react-artifact-root">
     <iframe
       ref="iframeRef"
       :srcdoc="htmlContent"
-      class="w-full h-full min-h-[400px] html-iframe-wrapper"
+      class="html-iframe-wrapper h-full min-h-0 w-full"
       sandbox="allow-scripts"
+      data-testid="react-artifact-iframe"
     ></iframe>
   </div>
 </template>
diff --git a/src/renderer/src/components/artifacts/SvgArtifact.vue b/src/renderer/src/components/artifacts/SvgArtifact.vue
index 25964a4c3..2ece0ce1b 100644
--- a/src/renderer/src/components/artifacts/SvgArtifact.vue
+++ b/src/renderer/src/components/artifacts/SvgArtifact.vue
@@ -1,22 +1,39 @@
 <template>
-  <div class="svg-artifact artifact-dialog-content">
+  <div
+    class="artifact-dialog-content flex h-full min-h-0 w-full items-stretch justify-center overflow-auto p-4"
+    data-testid="svg-artifact-root"
+  >
     <!-- Loading state -->
-    <div v-if="isLoading" class="loading-message">
+    <div
+      v-if="isLoading"
+      class="flex min-h-full w-full flex-1 flex-col items-center justify-center p-8 text-center"
+    >
       <Icon icon="lucide:loader-2" class="w-6 h-6 animate-spin text-blue-500" />
       <p class="text-sm text-muted-foreground mt-2">{{ t('artifacts.sanitizingSvg') }}</p>
     </div>
 
     <!-- Error state -->
-    <div v-else-if="hasError" class="error-message">
+    <div
+      v-else-if="hasError"
+      class="flex min-h-full w-full flex-1 flex-col items-center justify-center p-8 text-center"
+    >
       <Icon icon="lucide:alert-triangle" class="w-6 h-6 text-yellow-500" />
       <p class="text-sm text-muted-foreground mt-2">{{ t('artifacts.svgSanitizationFailed') }}</p>
     </div>
 
     <!-- Success state - render sanitized content -->
-    <div class="w-full" v-else-if="sanitizedContent" v-html="sanitizedContent"></div>
+    <div
+      v-else-if="sanitizedContent"
+      class="flex min-h-full w-full flex-1 items-center justify-center [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:h-auto [&_svg]:w-auto"
+      data-testid="svg-artifact-content"
+      v-html="sanitizedContent"
+    ></div>
 
     <!-- Empty state -->
-    <div v-else class="empty-message">
+    <div
+      v-else
+      class="flex min-h-full w-full flex-1 flex-col items-center justify-center p-8 text-center"
+    >
       <Icon icon="lucide:image" class="w-6 h-6 text-gray-400" />
       <p class="text-sm text-muted-foreground mt-2">{{ t('artifacts.noSvgContent') }}</p>
     </div>
@@ -88,43 +105,3 @@ onMounted(() => {
   }
 })
 </script>
-
-<style>
-.svg-artifact {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  min-height: 200px;
-}
-
-.svg-artifact svg {
-  max-width: 100%;
-  height: auto;
-}
-
-.loading-message,
-.error-message,
-.empty-message {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 2rem;
-}
-
-.loading-message .animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/renderer/src/components/sidepanel/ChatSidePanel.vue b/src/renderer/src/components/sidepanel/ChatSidePanel.vue
index 1288ee43f..bca06f2e8 100644
--- a/src/renderer/src/components/sidepanel/ChatSidePanel.vue
+++ b/src/renderer/src/components/sidepanel/ChatSidePanel.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="relative h-full shrink-0 overflow-hidden transition-[width] duration-200 ease-out"
+    class="relative h-full min-h-0 shrink-0 overflow-hidden transition-[width] duration-200 ease-out"
     :style="{ width: `${panelWidth}px` }"
   >
     <aside
       v-if="props.sessionId"
-      class="absolute inset-y-0 right-0 flex h-full w-full flex-col border-l bg-background shadow-lg transition-all duration-200 ease-out"
+      class="absolute inset-y-0 right-0 flex h-full min-h-0 w-full flex-col border-l bg-background shadow-lg transition-all duration-200 ease-out"
       :class="
         shouldShow
           ? 'translate-x-0 opacity-100'
diff --git a/src/renderer/src/components/sidepanel/WorkspacePanel.vue b/src/renderer/src/components/sidepanel/WorkspacePanel.vue
index eb9895aeb..6761f965c 100644
--- a/src/renderer/src/components/sidepanel/WorkspacePanel.vue
+++ b/src/renderer/src/components/sidepanel/WorkspacePanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex h-full min-w-0 flex-1 overflow-hidden">
-    <aside class="flex h-full w-[224px] shrink-0 flex-col border-r bg-muted/20">
+  <div class="flex h-full min-h-0 min-w-0 flex-1 overflow-hidden">
+    <aside class="flex h-full min-h-0 w-[224px] shrink-0 flex-col border-r bg-muted/20">
       <div class="flex-1 overflow-auto py-2">
         <section>
           <button
diff --git a/src/renderer/src/components/sidepanel/WorkspaceViewer.vue b/src/renderer/src/components/sidepanel/WorkspaceViewer.vue
index f73351d3b..d0ce140d6 100644
--- a/src/renderer/src/components/sidepanel/WorkspaceViewer.vue
+++ b/src/renderer/src/components/sidepanel/WorkspaceViewer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex h-full min-w-0 flex-1 flex-col bg-background">
-    <div class="flex h-11 items-center justify-between border-b px-3">
+  <div class="flex h-full min-h-0 min-w-0 flex-1 flex-col bg-background">
+    <div class="flex h-11 shrink-0 items-center justify-between border-b px-3">
       <div class="min-w-0">
         <h3 class="truncate text-sm font-medium">{{ viewerTitle }}</h3>
         <p v-if="viewerSubtitle" class="truncate text-xs text-muted-foreground">
@@ -45,7 +45,7 @@
       </div>
     </div>
 
-    <div class="min-h-0 flex-1 overflow-hidden">
+    <div class="flex min-h-0 flex-1 flex-col overflow-hidden" data-testid="workspace-viewer-body">
       <div
         v-if="paneKind === 'empty' && !(activeSource === 'file' && props.loadingFilePreview)"
         class="flex h-full items-center justify-center px-6"
@@ -98,10 +98,15 @@
         </template>
       </div>
 
-      <WorkspaceCodePane v-else-if="paneKind === 'code' && codeSource" :source="codeSource" />
+      <WorkspaceCodePane
+        v-else-if="paneKind === 'code' && codeSource"
+        class="h-full min-h-0 w-full"
+        :source="codeSource"
+      />
 
       <WorkspacePreviewPane
         v-else-if="paneKind === 'preview' && previewKind"
+        class="h-full min-h-0 w-full"
         :session-id="props.sessionId"
         :preview-kind="previewKind"
         :artifact="previewArtifact"
@@ -110,6 +115,7 @@
 
       <WorkspaceInfoPane
         v-else-if="paneKind === 'info' && props.filePreview"
+        class="h-full min-h-0 w-full"
         :file-preview="props.filePreview"
       />
 
diff --git a/src/renderer/src/components/sidepanel/viewer/WorkspaceCodePane.vue b/src/renderer/src/components/sidepanel/viewer/WorkspaceCodePane.vue
index 2afd60123..4c2a7bf3d 100644
--- a/src/renderer/src/components/sidepanel/viewer/WorkspaceCodePane.vue
+++ b/src/renderer/src/components/sidepanel/viewer/WorkspaceCodePane.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="h-full min-h-0 overflow-hidden bg-background">
+  <div class="flex h-full min-h-0 w-full overflow-hidden bg-background">
     <div
       ref="editorRef"
-      class="h-full w-full"
+      class="workspace-code-editor-host h-full min-h-0 w-full flex-1"
       :data-language="resolvedLanguage"
       data-testid="workspace-code-pane"
     ></div>
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useMonaco } from 'stream-monaco'
 import { useThemeStore } from '@/stores/theme'
 import { useUiSettingsStore } from '@/stores/uiSettingsStore'
@@ -31,6 +31,7 @@ const themeStore = useThemeStore()
 const editorRef = ref<HTMLElement | null>(null)
 const editorInitialized = ref(false)
 let createEditorTask: Promise<void> | null = null
+let resizeObserver: ResizeObserver | null = null
 const resolvedTheme = computed(() => (themeStore.isDark ? 'vitesse-dark' : 'vitesse-light'))
 
 const { createEditor, updateCode, cleanupEditor, getEditorView, getEditor } = useMonaco({
@@ -148,6 +149,14 @@ const applyTheme = async () => {
   }
 }
 
+const layoutEditor = () => {
+  try {
+    getEditorView()?.layout()
+  } catch (error) {
+    console.warn('[WorkspaceCodePane] Failed to layout Monaco editor:', error)
+  }
+}
+
 const syncEditor = async () => {
   const editorElement = editorRef.value
   if (!editorElement) {
@@ -169,6 +178,7 @@ const syncEditor = async () => {
       editorInitialized.value = true
       await applyTheme()
       applyFontFamily(uiSettingsStore.formattedCodeFontFamily)
+      layoutEditor()
     })()
 
     try {
@@ -180,6 +190,7 @@ const syncEditor = async () => {
   }
 
   updateCode(nextContent, nextLanguage)
+  layoutEditor()
 }
 
 watch(
@@ -220,14 +231,69 @@ watch(editorRef, (value) => {
     return
   }
 
+  resizeObserver?.disconnect()
+  resizeObserver = null
   cleanupEditor()
   editorInitialized.value = false
   createEditorTask = null
 })
 
+onMounted(() => {
+  if (typeof ResizeObserver === 'undefined') {
+    return
+  }
+
+  resizeObserver = new ResizeObserver(() => {
+    layoutEditor()
+  })
+
+  if (editorRef.value) {
+    resizeObserver.observe(editorRef.value)
+  }
+})
+
+watch(
+  editorRef,
+  (value, oldValue) => {
+    if (!resizeObserver) {
+      return
+    }
+
+    if (oldValue) {
+      resizeObserver.unobserve(oldValue)
+    }
+
+    if (value) {
+      resizeObserver.observe(value)
+      layoutEditor()
+    }
+  },
+  { flush: 'post' }
+)
+
 onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
   cleanupEditor()
   editorInitialized.value = false
   createEditorTask = null
 })
 </script>
+
+<style scoped>
+.workspace-code-editor-host {
+  display: flex;
+  height: 100% !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  overflow: hidden !important;
+}
+
+.workspace-code-editor-host :deep(.monaco-editor),
+.workspace-code-editor-host :deep(.overflow-guard),
+.workspace-code-editor-host :deep(.monaco-scrollable-element) {
+  height: 100% !important;
+  min-height: 0 !important;
+  max-height: none !important;
+}
+</style>
diff --git a/src/renderer/src/components/sidepanel/viewer/WorkspaceInfoPane.vue b/src/renderer/src/components/sidepanel/viewer/WorkspaceInfoPane.vue
index 680d7953f..9952d0743 100644
--- a/src/renderer/src/components/sidepanel/viewer/WorkspaceInfoPane.vue
+++ b/src/renderer/src/components/sidepanel/viewer/WorkspaceInfoPane.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="h-full min-h-0 overflow-auto px-4 py-4 text-sm" data-testid="workspace-info-pane">
+  <div
+    class="h-full min-h-0 w-full overflow-auto px-4 py-4 text-sm"
+    data-testid="workspace-info-pane"
+  >
     <div v-if="description" class="mb-3 text-foreground">{{ description }}</div>
     <div class="space-y-2 text-muted-foreground">
       <div>{{ props.filePreview.mimeType }}</div>
diff --git a/src/renderer/src/components/sidepanel/viewer/WorkspacePreviewPane.vue b/src/renderer/src/components/sidepanel/viewer/WorkspacePreviewPane.vue
index e046e0058..1996fb379 100644
--- a/src/renderer/src/components/sidepanel/viewer/WorkspacePreviewPane.vue
+++ b/src/renderer/src/components/sidepanel/viewer/WorkspacePreviewPane.vue
@@ -1,85 +1,94 @@
 <template>
   <div
-    v-if="props.previewKind === 'markdown'"
-    class="h-full min-h-0 overflow-auto"
-    data-testid="workspace-preview-markdown"
+    class="flex h-full min-h-0 w-full flex-col overflow-hidden"
+    data-testid="workspace-preview-pane"
   >
-    <div class="min-h-full px-4 py-4">
-      <MarkdownRenderer
-        :content="resolvedContent"
-        :message-id="previewSourceId"
-        :thread-id="props.sessionId"
-        :link-context="markdownLinkContext"
-      />
+    <div
+      v-if="props.previewKind === 'markdown'"
+      class="min-h-0 w-full flex-1 overflow-auto"
+      data-testid="workspace-preview-markdown"
+    >
+      <div class="min-h-full px-4 py-4">
+        <MarkdownRenderer
+          :content="resolvedContent"
+          :message-id="previewSourceId"
+          :thread-id="props.sessionId"
+          :link-context="markdownLinkContext"
+        />
+      </div>
     </div>
-  </div>
 
-  <div
-    v-else-if="props.previewKind === 'image'"
-    class="h-full min-h-0 overflow-auto bg-muted/20"
-    data-testid="workspace-preview-image"
-  >
-    <div class="flex min-h-full items-center justify-center p-4">
-      <img
-        v-if="imageSrc"
-        :src="imageSrc"
-        :alt="resolvedTitle"
-        class="max-h-full max-w-full rounded-md object-contain shadow-sm"
-      />
+    <div
+      v-else-if="props.previewKind === 'image'"
+      class="min-h-0 w-full flex-1 overflow-auto bg-muted/20"
+      data-testid="workspace-preview-image"
+    >
+      <div class="flex min-h-full items-center justify-center p-4">
+        <img
+          v-if="imageSrc"
+          :src="imageSrc"
+          :alt="resolvedTitle"
+          class="max-h-full max-w-full rounded-md object-contain shadow-sm"
+        />
+      </div>
     </div>
-  </div>
 
-  <div
-    v-else-if="documentPreviewUrl"
-    class="h-full min-h-0 overflow-hidden"
-    :data-testid="documentPreviewTestId"
-  >
-    <iframe
-      :src="documentPreviewUrl"
-      class="h-full w-full border-0"
-      :sandbox="documentPreviewSandbox"
-    ></iframe>
-  </div>
+    <div
+      v-else-if="documentPreviewUrl"
+      class="min-h-0 w-full flex-1 overflow-hidden"
+      :data-testid="documentPreviewTestId"
+    >
+      <iframe
+        :src="documentPreviewUrl"
+        class="h-full min-h-0 w-full border-0"
+        :sandbox="documentPreviewSandbox"
+      ></iframe>
+    </div>
 
-  <div
-    v-else-if="props.previewKind === 'html' && artifactBlock"
-    class="h-full min-h-0 overflow-hidden"
-    data-testid="workspace-preview-html-artifact"
-  >
-    <HTMLArtifact
-      :block="artifactBlock"
-      :is-preview="true"
-      viewport-size="desktop"
-      class="h-full"
-    />
-  </div>
+    <div
+      v-else-if="props.previewKind === 'html' && artifactBlock"
+      class="min-h-0 w-full flex-1 overflow-hidden"
+      data-testid="workspace-preview-html-artifact"
+    >
+      <HTMLArtifact
+        :block="artifactBlock"
+        :is-preview="true"
+        viewport-size="desktop"
+        class="h-full min-h-0 w-full"
+      />
+    </div>
 
-  <div
-    v-else-if="props.previewKind === 'svg' && resolvedBlock"
-    class="h-full min-h-0 overflow-hidden"
-    data-testid="workspace-preview-svg"
-  >
-    <SvgArtifact :block="resolvedBlock" class="h-full" />
-  </div>
+    <div
+      v-else-if="props.previewKind === 'svg' && resolvedBlock"
+      class="min-h-0 w-full flex-1 overflow-hidden"
+      data-testid="workspace-preview-svg"
+    >
+      <SvgArtifact :block="resolvedBlock" class="h-full min-h-0 w-full" />
+    </div>
 
-  <div
-    v-else-if="props.previewKind === 'mermaid' && artifactBlock"
-    class="h-full min-h-0 overflow-hidden"
-    data-testid="workspace-preview-mermaid"
-  >
-    <MermaidArtifact :block="artifactBlock" :is-preview="true" class="h-full" />
-  </div>
+    <div
+      v-else-if="props.previewKind === 'mermaid' && artifactBlock"
+      class="min-h-0 w-full flex-1 overflow-hidden"
+      data-testid="workspace-preview-mermaid"
+    >
+      <MermaidArtifact :block="artifactBlock" :is-preview="true" class="h-full min-h-0 w-full" />
+    </div>
 
-  <div
-    v-else-if="props.previewKind === 'react' && artifactBlock"
-    class="h-full min-h-0 overflow-hidden"
-    data-testid="workspace-preview-react"
-  >
-    <ReactArtifact :block="artifactBlock" :is-preview="true" class="h-full" />
-  </div>
+    <div
+      v-else-if="props.previewKind === 'react' && artifactBlock"
+      class="min-h-0 w-full flex-1 overflow-hidden"
+      data-testid="workspace-preview-react"
+    >
+      <ReactArtifact :block="artifactBlock" :is-preview="true" class="h-full min-h-0 w-full" />
+    </div>
 
-  <div v-else class="h-full min-h-0 overflow-auto px-4 py-3" data-testid="workspace-preview-raw">
-    <pre class="whitespace-pre-wrap break-words text-sm leading-6">{{ resolvedContent }}</pre>
+    <div
+      v-else
+      class="min-h-0 w-full flex-1 overflow-auto px-4 py-3"
+      data-testid="workspace-preview-raw"
+    >
+      <pre class="whitespace-pre-wrap break-words text-sm leading-6">{{ resolvedContent }}</pre>
+    </div>
   </div>
 </template>
 
diff --git a/src/renderer/src/views/ChatTabView.vue b/src/renderer/src/views/ChatTabView.vue
index ed8b3571e..df16323af 100644
--- a/src/renderer/src/views/ChatTabView.vue
+++ b/src/renderer/src/views/ChatTabView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex h-full w-full flex-row overflow-hidden">
-    <div class="flex h-full min-w-0 w-0 flex-1 transition-[width] duration-200 ease-out">
+  <div class="flex h-full min-h-0 w-full flex-row overflow-hidden">
+    <div class="flex h-full min-h-0 min-w-0 w-0 flex-1 transition-[width] duration-200 ease-out">
       <template v-if="isReady">
         <AgentWelcomePage
           v-if="pageRouter.currentRoute === 'newThread' && agentStore.selectedAgentId === null"
diff --git a/test/renderer/components/HTMLArtifact.test.ts b/test/renderer/components/HTMLArtifact.test.ts
index 43de83a7b..7eacb6388 100644
--- a/test/renderer/components/HTMLArtifact.test.ts
+++ b/test/renderer/components/HTMLArtifact.test.ts
@@ -3,6 +3,27 @@ import { describe, it, expect } from 'vitest'
 import HTMLArtifact from '@/components/artifacts/HTMLArtifact.vue'
 
 describe('HTMLArtifact', () => {
+  it('uses full-height classes for desktop viewport', () => {
+    const wrapper = mount(HTMLArtifact, {
+      props: {
+        block: {
+          content: '<html><body>Hello</body></html>',
+          artifact: { type: 'text/html', title: 'doc' }
+        },
+        isPreview: true,
+        viewportSize: 'desktop'
+      },
+      attachTo: document.body
+    })
+
+    expect(wrapper.get('[data-testid="html-artifact-root"]').classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'overflow-hidden'])
+    )
+    expect(wrapper.get('[data-testid="html-artifact-iframe"]').classes()).toEqual(
+      expect.arrayContaining(['block', 'h-full', 'min-h-0', 'w-full'])
+    )
+  })
+
   it('applies correct classes and styles for mobile viewport', () => {
     const wrapper = mount(HTMLArtifact, {
       props: {
@@ -16,7 +37,7 @@ describe('HTMLArtifact', () => {
       attachTo: document.body
     })
 
-    const iframe = wrapper.find('iframe')
+    const iframe = wrapper.get('[data-testid="html-artifact-iframe"]')
     expect(iframe.exists()).toBe(true)
     const cls = iframe.attributes('class') || ''
     expect(cls).toContain('html-iframe-wrapper')
diff --git a/test/renderer/components/MermaidArtifact.test.ts b/test/renderer/components/MermaidArtifact.test.ts
index 7c9b94e21..196a2715e 100644
--- a/test/renderer/components/MermaidArtifact.test.ts
+++ b/test/renderer/components/MermaidArtifact.test.ts
@@ -2,6 +2,13 @@ import { mount } from '@vue/test-utils'
 import { describe, it, expect, vi } from 'vitest'
 import MermaidArtifact from '@/components/artifacts/MermaidArtifact.vue'
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, values?: Record<string, string>) =>
+      key === 'artifacts.mermaid.renderError' ? `${key}:${values?.message ?? ''}` : key
+  })
+}))
+
 // Mock mermaid library
 vi.mock('mermaid', () => ({
   default: {
@@ -31,13 +38,13 @@ describe('MermaidArtifact', () => {
       // Wait for component to mount and initialize
       await new Promise((resolve) => setTimeout(resolve, 100))
 
-      const mermaidRef = wrapper.find('[ref="mermaidRef"]')
+      const mermaidRef = wrapper.get('[data-testid="mermaid-artifact-preview"]')
       expect(mermaidRef.exists()).toBe(true)
 
       // The content should be sanitized and set to innerHTML
       // Since we can't directly access the sanitizeMermaidContent function,
       // we verify that the content is set and doesn't contain dangerous tags
-      expect(mermaidRef.element.innerHTML).toBe('graph TD\nA-->B')
+      expect(mermaidRef.element.textContent).toBe('graph TD\nA-->B')
     })
 
     it('should filter dangerous img tag with onerror', async () => {
@@ -57,7 +64,7 @@ describe('MermaidArtifact', () => {
       // Wait for component to mount and initialize
       await new Promise((resolve) => setTimeout(resolve, 100))
 
-      const mermaidRef = wrapper.find('[ref="mermaidRef"]')
+      const mermaidRef = wrapper.get('[data-testid="mermaid-artifact-preview"]')
       expect(mermaidRef.exists()).toBe(true)
 
       // The img tag should be removed
@@ -84,7 +91,7 @@ describe('MermaidArtifact', () => {
 
       await new Promise((resolve) => setTimeout(resolve, 100))
 
-      const mermaidRef = wrapper.find('[ref="mermaidRef"]')
+      const mermaidRef = wrapper.get('[data-testid="mermaid-artifact-preview"]')
       expect(mermaidRef.element.innerHTML).not.toContain('<script>')
       expect(mermaidRef.element.innerHTML).not.toContain('alert(1)')
       expect(mermaidRef.element.innerHTML).toContain('graph TD')
@@ -106,7 +113,7 @@ describe('MermaidArtifact', () => {
 
       await new Promise((resolve) => setTimeout(resolve, 100))
 
-      const mermaidRef = wrapper.find('[ref="mermaidRef"]')
+      const mermaidRef = wrapper.get('[data-testid="mermaid-artifact-preview"]')
       expect(mermaidRef.element.innerHTML).not.toContain('onclick')
       expect(mermaidRef.element.innerHTML).not.toContain('alert(1)')
     })
@@ -127,7 +134,7 @@ describe('MermaidArtifact', () => {
 
       await new Promise((resolve) => setTimeout(resolve, 100))
 
-      const mermaidRef = wrapper.find('[ref="mermaidRef"]')
+      const mermaidRef = wrapper.get('[data-testid="mermaid-artifact-preview"]')
       expect(mermaidRef.element.innerHTML).not.toContain('javascript:')
       expect(mermaidRef.element.innerHTML).toContain('graph TD')
     })
@@ -149,7 +156,7 @@ describe('MermaidArtifact', () => {
 
       await new Promise((resolve) => setTimeout(resolve, 100))
 
-      const mermaidRef = wrapper.find('[ref="mermaidRef"]')
+      const mermaidRef = wrapper.get('[data-testid="mermaid-artifact-preview"]')
       // The img tag should be completely removed
       expect(mermaidRef.element.innerHTML).not.toContain('<img')
       expect(mermaidRef.element.innerHTML).not.toContain('onerror')
@@ -178,4 +185,26 @@ describe('MermaidArtifact', () => {
     expect(pre.text()).toContain('graph TD')
     expect(pre.text()).toContain('A-->B')
   })
+
+  it('uses full-height preview classes without viewport-based caps', () => {
+    const wrapper = mount(MermaidArtifact, {
+      props: {
+        block: {
+          content: 'graph TD\nA-->B',
+          artifact: { type: 'application/vnd.ant.mermaid', title: 'Test Diagram' }
+        },
+        isPreview: true
+      }
+    })
+
+    expect(wrapper.get('[data-testid="mermaid-artifact-root"]').classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'flex-col', 'overflow-hidden'])
+    )
+
+    const preview = wrapper.get('[data-testid="mermaid-artifact-preview"]')
+    expect(preview.classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'flex-1', 'overflow-auto'])
+    )
+    expect(preview.attributes('class')).not.toContain('max-h-[calc(100vh-120px)]')
+  })
 })
diff --git a/test/renderer/components/ReactArtifact.test.ts b/test/renderer/components/ReactArtifact.test.ts
new file mode 100644
index 000000000..a47cbdb55
--- /dev/null
+++ b/test/renderer/components/ReactArtifact.test.ts
@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ReactArtifact from '@/components/artifacts/ReactArtifact.vue'
+
+describe('ReactArtifact', () => {
+  it('uses full-height iframe classes without fixed minimum height', () => {
+    const wrapper = mount(ReactArtifact, {
+      props: {
+        block: {
+          content: 'export default function App() { return <div>Hello</div> }',
+          artifact: { type: 'application/vnd.ant.react', title: 'App' }
+        },
+        isPreview: true
+      },
+      attachTo: document.body
+    })
+
+    expect(wrapper.get('[data-testid="react-artifact-root"]').classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'overflow-hidden'])
+    )
+
+    const iframe = wrapper.get('[data-testid="react-artifact-iframe"]')
+    expect(iframe.classes()).toEqual(
+      expect.arrayContaining(['html-iframe-wrapper', 'h-full', 'min-h-0', 'w-full'])
+    )
+    expect(iframe.attributes('class')).not.toContain('min-h-[400px]')
+  })
+})
diff --git a/test/renderer/components/SvgArtifact.test.ts b/test/renderer/components/SvgArtifact.test.ts
new file mode 100644
index 000000000..08dc73cd7
--- /dev/null
+++ b/test/renderer/components/SvgArtifact.test.ts
@@ -0,0 +1,51 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import SvgArtifact from '@/components/artifacts/SvgArtifact.vue'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+vi.mock('@/composables/usePresenter', () => ({
+  usePresenter: () => ({
+    sanitizeSvgContent: vi.fn(async (content: string) => content)
+  })
+}))
+
+describe('SvgArtifact', () => {
+  it('uses full-height flex classes for sanitized previews', async () => {
+    const wrapper = mount(SvgArtifact, {
+      props: {
+        block: {
+          content: '<svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg>',
+          artifact: { type: 'image/svg+xml', title: 'Diagram' }
+        }
+      }
+    })
+
+    await flushPromises()
+
+    expect(wrapper.get('[data-testid="svg-artifact-root"]').classes()).toEqual(
+      expect.arrayContaining([
+        'artifact-dialog-content',
+        'flex',
+        'h-full',
+        'min-h-0',
+        'w-full',
+        'overflow-auto'
+      ])
+    )
+    expect(wrapper.get('[data-testid="svg-artifact-content"]').classes()).toEqual(
+      expect.arrayContaining([
+        'flex',
+        'min-h-full',
+        'w-full',
+        'flex-1',
+        'items-center',
+        'justify-center'
+      ])
+    )
+  })
+})
diff --git a/test/renderer/components/WorkspacePreviewPane.test.ts b/test/renderer/components/WorkspacePreviewPane.test.ts
index 61cc260d5..ded5a90f2 100644
--- a/test/renderer/components/WorkspacePreviewPane.test.ts
+++ b/test/renderer/components/WorkspacePreviewPane.test.ts
@@ -82,9 +82,14 @@ describe('WorkspacePreviewPane', () => {
       }
     })
 
+    expect(wrapper.get('[data-testid="workspace-preview-pane"]').classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'flex-col', 'overflow-hidden'])
+    )
     const iframe = wrapper.get('iframe')
     expect(iframe.attributes('src')).toBe(previewUrl)
-    expect(wrapper.get(`[data-testid="workspace-preview-${kind}"]`).exists()).toBe(true)
+    expect(wrapper.get(`[data-testid="workspace-preview-${kind}"]`).classes()).toEqual(
+      expect.arrayContaining(['flex-1', 'min-h-0', 'w-full'])
+    )
 
     if (sandbox) {
       expect(iframe.attributes('sandbox')).toBe(sandbox)
@@ -142,6 +147,9 @@ describe('WorkspacePreviewPane', () => {
     })
 
     expect(wrapper.find('iframe').exists()).toBe(false)
+    expect(wrapper.get('[data-testid="workspace-preview-pane"]').classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'flex-col', 'overflow-hidden'])
+    )
     expect(wrapper.get('[data-testid="workspace-preview-markdown"]').exists()).toBe(true)
     expect(wrapper.get('[data-testid="markdown-renderer"]').text()).toContain('# Hello')
     expect(wrapper.get('[data-testid="markdown-renderer"]').attributes('data-message-id')).toBe(
@@ -188,8 +196,60 @@ describe('WorkspacePreviewPane', () => {
     })
 
     expect(wrapper.find('iframe').exists()).toBe(false)
+    expect(wrapper.get('[data-testid="workspace-preview-pane"]').classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-full', 'min-h-0', 'w-full', 'flex-col', 'overflow-hidden'])
+    )
     expect(wrapper.get('[data-testid="workspace-preview-image"] img').attributes('src')).toBe(
       'imgcache://logo.png'
     )
   })
+
+  it('passes full-height classes to HTML artifact previews', () => {
+    const wrapper = mount(WorkspacePreviewPane, {
+      props: {
+        sessionId: 'session-1',
+        previewKind: 'html',
+        artifact: {
+          id: 'artifact-1',
+          type: 'text/html',
+          title: 'Preview',
+          content: '<html><body>Hello</body></html>',
+          status: 'loaded'
+        }
+      },
+      global: {
+        stubs: {
+          MarkdownRenderer: true,
+          HTMLArtifact: defineComponent({
+            name: 'HTMLArtifact',
+            props: {
+              block: {
+                type: Object,
+                required: true
+              },
+              isPreview: {
+                type: Boolean,
+                required: true
+              },
+              viewportSize: {
+                type: String,
+                default: undefined
+              }
+            },
+            template: '<div data-testid="html-artifact-stub" />'
+          }),
+          SvgArtifact: true,
+          MermaidArtifact: true,
+          ReactArtifact: true
+        }
+      }
+    })
+
+    expect(wrapper.get('[data-testid="workspace-preview-html-artifact"]').classes()).toEqual(
+      expect.arrayContaining(['flex-1', 'min-h-0', 'w-full', 'overflow-hidden'])
+    )
+    expect(wrapper.get('[data-testid="html-artifact-stub"]').classes()).toEqual(
+      expect.arrayContaining(['h-full', 'min-h-0', 'w-full'])
+    )
+  })
 })
diff --git a/test/renderer/components/WorkspaceViewer.test.ts b/test/renderer/components/WorkspaceViewer.test.ts
index 4399d29a2..736cfa670 100644
--- a/test/renderer/components/WorkspaceViewer.test.ts
+++ b/test/renderer/components/WorkspaceViewer.test.ts
@@ -136,6 +136,12 @@ describe('WorkspaceViewer', () => {
   it('shows raw artifact preview through preview pane fallback', async () => {
     const { wrapper } = await setup()
 
+    expect(wrapper.get('[data-testid="workspace-viewer-body"]').classes()).toEqual(
+      expect.arrayContaining(['min-h-0', 'flex-1', 'overflow-hidden'])
+    )
+    expect(wrapper.get('[data-testid="preview-pane"]').classes()).toEqual(
+      expect.arrayContaining(['h-full', 'min-h-0', 'w-full'])
+    )
     expect(wrapper.get('[data-testid="preview-pane"]').text()).toContain('raw')
     expect(wrapper.text()).toContain('artifacts.preview')
     expect(wrapper.text()).toContain('artifacts.code')
@@ -175,6 +181,9 @@ describe('WorkspaceViewer', () => {
     })
 
     expect(wrapper.find('[data-testid="code-pane"]').exists()).toBe(true)
+    expect(wrapper.get('[data-testid="code-pane"]').classes()).toEqual(
+      expect.arrayContaining(['h-full', 'min-h-0', 'w-full'])
+    )
     expect(wrapper.find('[data-testid="preview-pane"]').exists()).toBe(false)
     expect(wrapper.text()).not.toContain('artifacts.preview')
     expect(wrapper.text()).not.toContain('artifacts.code')
@@ -344,6 +353,9 @@ describe('WorkspaceViewer', () => {
     })
 
     expect(wrapper.find('[data-testid="info-pane"]').exists()).toBe(true)
+    expect(wrapper.get('[data-testid="info-pane"]').classes()).toEqual(
+      expect.arrayContaining(['h-full', 'min-h-0', 'w-full'])
+    )
     expect(wrapper.find('[data-testid="preview-pane"]').exists()).toBe(false)
     expect(wrapper.find('[data-testid="code-pane"]').exists()).toBe(false)
   })