From 044f7f0cc60222f942266ea5dcb489585c9817c8 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Tue, 19 May 2026 19:15:03 +0200
Subject: [PATCH] feat(editor): bump HTML iframe preview default height to
 480px (MUL-2419) (#2842)

320px was too cramped for typical rendered HTML (charts, dashboards,
formatted documents). Matches the existing HTML attachment preview
height for visual consistency across both iframe surfaces.

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 packages/views/editor/code-block-iframe.tsx          | 4 ++--
 packages/views/editor/extensions/code-block-view.tsx | 2 +-
 packages/views/editor/html-block-preview.tsx         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/views/editor/code-block-iframe.tsx b/packages/views/editor/code-block-iframe.tsx
index 023bd6e21..28d8e848e 100644
--- a/packages/views/editor/code-block-iframe.tsx
+++ b/packages/views/editor/code-block-iframe.tsx
@@ -29,7 +29,7 @@ interface CodeBlockIframeProps {
   /** Iframe title for accessibility. */
   title: string;
   className?: string;
-  /** Tailwind height token; defaults to h-[320px]. */
+  /** Tailwind height token; defaults to h-[480px]. */
   heightClassName?: string;
 }
 
@@ -37,7 +37,7 @@ export function CodeBlockIframe({
   html,
   title,
   className,
-  heightClassName = "h-[320px]",
+  heightClassName = "h-[480px]",
 }: CodeBlockIframeProps) {
   return (
     <iframe
diff --git a/packages/views/editor/extensions/code-block-view.tsx b/packages/views/editor/extensions/code-block-view.tsx
index 188fc22d5..2b847da5f 100644
--- a/packages/views/editor/extensions/code-block-view.tsx
+++ b/packages/views/editor/extensions/code-block-view.tsx
@@ -18,7 +18,7 @@ import { CodeBlockIframe } from "../code-block-iframe";
 // keystroke causes the iframe to re-load and flicker.
 const PREVIEW_DEBOUNCE_MS = 200;
 
-const HTML_PREVIEW_HEIGHT = "h-[320px]";
+const HTML_PREVIEW_HEIGHT = "h-[480px]";
 
 function useDebouncedValue<T>(value: T, delayMs: number): T {
   const [debounced, setDebounced] = useState(value);
diff --git a/packages/views/editor/html-block-preview.tsx b/packages/views/editor/html-block-preview.tsx
index 0801b4319..eb4dc3261 100644
--- a/packages/views/editor/html-block-preview.tsx
+++ b/packages/views/editor/html-block-preview.tsx
@@ -22,7 +22,7 @@ import { useT } from "../i18n";
 import { CodeBlockIframe } from "./code-block-iframe";
 import { CodeBlockStatic } from "./code-block-static";
 
-const CODE_BLOCK_IFRAME_HEIGHT = "h-[320px]";
+const CODE_BLOCK_IFRAME_HEIGHT = "h-[480px]";
 
 // Label shown in the code-block header. Not a translatable string — it's a
 // language identifier (matches the `lang === "html"` token below).