fix(editor): preview the banner correctly in the Embed Studio

The studio built every preview srcdoc without fullBleed and let the iframe
fill the whole preview pane, so the banner (an edge-to-edge 5:2 embed) was
rendered like a height-reporting chart and looked nothing like the hero.

When editing banner.html, build the srcdoc with `fullBleed: true` and render
it inside a centered 5:2 stage (matching .hero-banner dimensions), so the
studio preview is a true WYSIWYG of the published header. Regular charts are
unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/EmbedStudio.tsx

@@ -156,6 +156,10 @@ export function EmbedStudio({
   onSelectChart,
 }: EmbedStudioProps) {
   const { isDark, primaryColor } = useTheme();
+  // The banner is a special embed: it renders edge-to-edge in a 5:2 box (the
+  // hero) rather than as a height-reporting chart. The studio must preview it
+  // the same way (fullBleed srcdoc + constrained 5:2 stage) so it's WYSIWYG.
+  const isBanner = src === "banner.html";
   const [html, setHtml] = useState("");
   const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
   const [selectedDataFile, setSelectedDataFile] = useState<string | null>(null);
@@ -181,11 +185,12 @@ export function EmbedStudio({
     return embedStore.observeKey(src, setHtml);
   }, [embedStore, src]);
 
-  // Build srcdoc
+  // Build srcdoc. Banner previews use fullBleed so the content fills the
+  // iframe edge-to-edge, matching FrontmatterHero and the published output.
   const srcdoc = useMemo(() => {
     if (!html) return "";
-    return buildDoc(html, { isDark, primaryColor });
-  }, [html, isDark, primaryColor]);
+    return buildDoc(html, { isDark, primaryColor, fullBleed: isBanner });
+  }, [html, isDark, primaryColor, isBanner]);
 
   // Load srcdoc into inactive frame
   useEffect(() => {
@@ -305,7 +310,6 @@ export function EmbedStudio({
         <div className="es-chat">
           <div className="es-chat__messages">
             {chat.messages.length === 0 && (() => {
-              const isBanner = src === "banner.html";
               const hasChart = html.trim().length > 0;
               let title: string;
               let hint: string;
@@ -423,10 +427,12 @@ export function EmbedStudio({
 
           {/* Both panels always mounted - toggle with hidden class to preserve iframe state */}
           <div
-            className={`es-preview__frame-container ${viewMode !== "preview" || selectedFile ? "es-hidden" : ""}`}
+            className={`es-preview__frame-container ${isBanner ? "es-preview__frame-container--banner" : ""} ${viewMode !== "preview" || selectedFile ? "es-hidden" : ""}`}
           >
             {html ? (
-              <>
+              <div
+                className={`es-preview__stage ${isBanner ? "es-preview__stage--banner" : ""}`}
+              >
                 <iframe
                   ref={frameA}
                   title="Chart preview A"
@@ -441,7 +447,7 @@ export function EmbedStudio({
                   onLoad={() => handleFrameLoad("b")}
                   style={frameStyle("b")}
                 />
-              </>
+              </div>
             ) : (
               <div className="es-preview__empty">
                 <span style={{ fontSize: 32, opacity: 0.4 }}>📊</span>

frontend/src/styles/components/_embed-studio.css

@@ -331,6 +331,33 @@
   background: var(--page-bg);
 }
 
+/* Stage: the positioned context the double-buffered iframes fill (inset:0).
+   Default: fills the whole frame container (chart previews). */
+.es-preview__stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Banner mode: center a 5:2 box matching .hero-banner so the preview is a
+   true WYSIWYG of how the banner renders in the article header. */
+.es-preview__frame-container--banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.es-preview__frame-container--banner .es-preview__stage {
+  height: auto;
+  width: 100%;
+  max-width: 980px;
+  aspect-ratio: 5 / 2;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
 .es-preview__frame-container iframe {
   /* Some browsers paint a default white canvas on `srcdoc` iframes
      before the document's own <style> applies. Forcing the element