fix(campaign): stabilize message preview overlays

webui/tests/message-preview-overlay-structure.test.mjs

@@ -0,0 +1,43 @@
+import { readFileSync } from "node:fs";
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}
+
+const overlaySource = readFileSync(
+  "src/features/campaigns/components/MessagePreviewOverlay.tsx",
+  "utf8"
+);
+const styles = readFileSync("src/styles/campaign-workspace.css", "utf8");
+
+assert(
+  overlaySource.includes("overlay-backdrop message-preview-backdrop"),
+  "message previews expose their responsive backdrop hook"
+);
+assert(
+  overlaySource.includes('type="button" className="modal-close" aria-label={closeLabel} title={closeLabel}'),
+  "the close control has stable button semantics, an accessible name, and a tooltip"
+);
+assert(
+  styles.includes("height: min(780px, calc(100dvh - 48px));"),
+  "desktop previews use a stable responsive height"
+);
+assert(
+  styles.includes("flex: 1 1 auto;") &&
+    styles.includes("min-height: 0;") &&
+    styles.includes("overflow: auto;") &&
+    styles.includes("scrollbar-gutter: stable;"),
+  "the preview body owns scrolling without moving the surrounding actions"
+);
+assert(
+  styles.includes(".message-preview-modal .modal-footer") &&
+    styles.includes("min-height: 68px;"),
+  "the preview footer keeps a stable desktop action area"
+);
+assert(
+  styles.includes("height: calc(100dvh - 16px);") &&
+    styles.includes("height: clamp(210px, 38dvh, 360px);"),
+  "small viewports use their available dynamic height"
+);
+
+console.log("Message preview overlay structure checks passed.");