From ca21867224a2055172ade5ead17cca78599a1cf5 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Mon, 4 May 2026 14:05:51 -0700
Subject: [PATCH 1/2] fix(dashboard): give vibe-code editor a definite height;
 sandbox email-preview iframes

The email template/theme/draft editors render inside VibeCodeLayout, whose
mobile and desktop wrappers used `h-full`. The dashboard shell's `<main>` has
no explicit height (its flex parent uses `items-start`, so it doesn't stretch),
so percentage heights collapsed and the editor rendered with zero height.

Anchor the wrappers to viewport-minus-header instead, matching the values
already used by `sidebar-layout.tsx` (3.5rem light, 6rem dark for the floating
header). This decouples the editor from any ancestor height chain.

Also lock down the email preview iframes with `sandbox=""` so untrusted
template HTML can't run scripts, navigate the parent, submit forms, etc.
---
 apps/dashboard/src/components/email-preview.tsx          | 2 ++
 .../src/components/vibe-coding/vibe-code-layout.tsx      | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/components/email-preview.tsx b/apps/dashboard/src/components/email-preview.tsx
index ac9c6d3912..36cead7983 100644
--- a/apps/dashboard/src/components/email-preview.tsx
+++ b/apps/dashboard/src/components/email-preview.tsx
@@ -106,6 +106,7 @@ function EmailPreviewContent({
 
   return (
     <iframe
+      sandbox=""
       srcDoc={inertPreviewHtml}
       className="w-full h-full border-0"
       title="Email Preview"
@@ -692,6 +693,7 @@ function EmailPreviewEditableContent({
 
   return (
     <iframe
+      sandbox=""
       ref={iframeRef}
       srcDoc={editableHtml}
       className="w-full h-full border-0"
diff --git a/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx b/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx
index 67d97e7e6f..50a44144a8 100644
--- a/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx
+++ b/apps/dashboard/src/components/vibe-coding/vibe-code-layout.tsx
@@ -132,7 +132,10 @@ export default function VibeCodeLayout({
   return (
     <TooltipProvider delayDuration={300}>
       {/* Mobile Layout - visible on small screens, hidden on md+ */}
-      <div className="flex flex-col h-full w-full overflow-hidden md:hidden">
+      {/* h-[calc(100dvh-3.5rem)] anchors to viewport (minus sticky header) so the
+          editor doesn't depend on an unbroken h-full chain through the dashboard
+          shell, which collapses because <main> doesn't stretch (items-start). */}
+      <div className="flex flex-col h-[calc(100dvh-3.5rem)] w-full overflow-hidden md:hidden">
         {/* Mobile Header - Compact */}
         <div className="px-3 pt-3 pb-2 shrink-0">
           <div className="flex flex-col gap-2">
@@ -354,7 +357,9 @@ export default function VibeCodeLayout({
       </div>
 
       {/* Desktop/Tablet Layout - hidden on small screens, visible on md+ */}
-      <div className="hidden md:flex flex-col h-full w-full overflow-hidden">
+      {/* See note on the mobile wrapper above; the dark-mode header is taller
+          (floating card with mt-3/mb-3 padding), matching sidebar-layout.tsx. */}
+      <div className="hidden md:flex flex-col h-[calc(100vh-3.5rem)] dark:h-[calc(100vh-6rem)] w-full overflow-hidden">
         <div className="flex-1 overflow-hidden flex flex-col">
           {/* Top Header / Toolbar - with consistent inset spacing */}
           <div className="px-6 pt-4 pb-3">

From cc4144393abd632b65eae4bd83a42428732c87ff Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Mon, 4 May 2026 14:41:14 -0700
Subject: [PATCH 2/2] fix(dashboard): allow scripts in email-preview iframes

Empty sandbox blocked the inline scripts that prevent link clicks and
drive the WYSIWYG editor's postMessage flow, breaking the editor.

`allow-scripts` (without `allow-same-origin`) lets those scripts run
while keeping the iframe in an opaque origin: malicious template HTML
still can't read parent cookies/localStorage/DOM, can't make credentialed
requests to the dashboard API, and can't navigate or submit forms in the
parent. Token exfiltration via XSS in template HTML remains blocked.

Residual risk: a script in the iframe can post a fake stack_edit_commit
to the parent (the e.source check passes since the script runs in the
iframe). That's a cross-admin UI-redress concern, not token theft, and
should be addressed separately (e.g. CSP nonce on the injected script).
---
 apps/dashboard/src/components/email-preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/components/email-preview.tsx b/apps/dashboard/src/components/email-preview.tsx
index 36cead7983..571dbcff93 100644
--- a/apps/dashboard/src/components/email-preview.tsx
+++ b/apps/dashboard/src/components/email-preview.tsx
@@ -106,7 +106,7 @@ function EmailPreviewContent({
 
   return (
     <iframe
-      sandbox=""
+      sandbox="allow-scripts"
       srcDoc={inertPreviewHtml}
       className="w-full h-full border-0"
       title="Email Preview"
@@ -693,7 +693,7 @@ function EmailPreviewEditableContent({
 
   return (
     <iframe
-      sandbox=""
+      sandbox="allow-scripts"
       ref={iframeRef}
       srcDoc={editableHtml}
       className="w-full h-full border-0"