Use the central Dialog for Campaign previews

webui/src/features/campaigns/components/MessagePreviewOverlay.tsx

@@ -1,6 +1,6 @@
-import { useEffect, type ReactNode } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { ArrowBigLeft, ArrowBigLeftDash, ArrowBigRight, ArrowBigRightDash } from "lucide-react";
-import { Button, MessageDisplayPanel, type MessageDisplayAttachment } from "@govoplan/core-webui";
+import { Button, Dialog, MessageDisplayPanel, type MessageDisplayAttachment } from "@govoplan/core-webui";
 
 // Campaign review/template/mock previews need recipient navigation, review notes,
 // raw MIME inspection and attachment grouping. Generic mailbox reading uses
@@ -60,15 +60,13 @@ export default function CampaignMessagePreviewOverlay({
 }: CampaignMessagePreviewOverlayProps) {
   const shownSubject = subject?.trim() || "i18n:govoplan-campaign.no_subject.7b4e8035";
   const fields = metaItems.map((item) => ({ label: item.label, value: item.value }));
+  const contentRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      const dialogPanel = contentRef.current?.closest<HTMLElement>("[data-dialog-stack-state]");
+      if (dialogPanel?.dataset.dialogStackState !== "topmost") return;
       if (isEditableTarget(event.target)) return;
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-        return;
-      }
       if (!navigation) return;
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -87,16 +85,26 @@ export default function CampaignMessagePreviewOverlay({
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [navigation, onClose]);
+  }, [navigation]);
 
   return (
-    <div className="overlay-backdrop message-preview-backdrop" role="dialog" aria-modal="true" aria-labelledby="message-preview-title">
-      <div className="modal-panel template-preview-modal message-preview-modal">
-        <header className="modal-header">
-          <h2 id="message-preview-title">{title}</h2>
-          <button type="button" className="modal-close" aria-label={closeLabel} title={closeLabel} onClick={onClose}>×</button>
-        </header>
-        <div className="modal-body">
+    <Dialog
+      open
+      title={title}
+      onClose={onClose}
+      closeLabel={closeLabel}
+      closeOnBackdrop={false}
+      backdropClassName="overlay-backdrop message-preview-backdrop"
+      className="modal-panel template-preview-modal message-preview-modal"
+      headerClassName="modal-header"
+      bodyClassName="modal-body"
+      footerClassName="modal-footer"
+      footer={<>
+        {actions && <div className="button-row compact-actions">{actions}</div>}
+        <Button variant="primary" onClick={onClose}>{closeLabel}</Button>
+      </>}
+    >
+      <div ref={contentRef} className="message-preview-content">
           {(recipientLabel || recipientNote || navigation) &&
           <div className="template-preview-toolbar">
               <div>
@@ -132,13 +140,8 @@ export default function CampaignMessagePreviewOverlay({
               <pre className="mock-message-raw">{raw}</pre>
             </details>
           }
-        </div>
-        <footer className="modal-footer">
-          {actions && <div className="button-row compact-actions">{actions}</div>}
-          <Button variant="primary" onClick={onClose}>{closeLabel}</Button>
-        </footer>
       </div>
-    </div>);
+    </Dialog>);
 
 }
 

webui/src/styles/campaign-workspace.css

@@ -1335,6 +1335,10 @@
   scrollbar-gutter: stable;
 }
 
+.message-preview-content {
+  display: contents;
+}
+
 .message-preview-modal .modal-footer {
   align-items: center;
   min-height: 68px;