diff --git a/src/components/AgentCard.jsx b/src/components/AgentCard.jsx
index cf9ab63..5c41a9f 100644
--- a/src/components/AgentCard.jsx
+++ b/src/components/AgentCard.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { AGENTS } from '../api/agents.js'
 import './AgentCard.css'
 
@@ -38,7 +39,7 @@ export default function AgentCard({ agentKey, onClose }) {
 
   if (!a) return null
 
-  return (
+  return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
         className="prose__dlg card"
@@ -105,5 +106,7 @@ export default function AgentCard({ agentKey, onClose }) {
         </div>
       </div>
     </div>
+    ,
+    document.body,
   )
 }
diff --git a/src/components/CallTranscript.jsx b/src/components/CallTranscript.jsx
index d15b74f..14634fe 100644
--- a/src/components/CallTranscript.jsx
+++ b/src/components/CallTranscript.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import './Conversation.css'
 
 /**
@@ -60,7 +61,7 @@ export default function CallTranscript({ text, name, onClose }) {
     }
   }, [onClose])
 
-  return (
+  return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
         className="prose__dlg conv"
@@ -101,5 +102,7 @@ export default function CallTranscript({ text, name, onClose }) {
         </p>
       </div>
     </div>
+    ,
+    document.body,
   )
 }
diff --git a/src/components/ClampText.jsx b/src/components/ClampText.jsx
index 166cf66..36b5388 100644
--- a/src/components/ClampText.jsx
+++ b/src/components/ClampText.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import './ClampText.css'
 
 /**
@@ -50,7 +51,7 @@ function ProseDialog({ title, lead, body, onClose }) {
     }
   }, [onClose])
 
-  return (
+  return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
         className="prose__dlg"
@@ -77,7 +78,8 @@ function ProseDialog({ title, lead, body, onClose }) {
           {body.split(/\n{2,}/).map((para, i) => <p key={i}>{para}</p>)}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }
 
diff --git a/src/components/Conversation.jsx b/src/components/Conversation.jsx
index ad654bd..d2aa0ec 100644
--- a/src/components/Conversation.jsx
+++ b/src/components/Conversation.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { baseFieldId } from '../api/config.js'
 import './Conversation.css'
 
@@ -88,7 +89,7 @@ export default function Conversation({ rows, name, onClose }) {
     }
   }, [onClose])
 
-  return (
+  return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
         className="prose__dlg conv"
@@ -128,5 +129,7 @@ export default function Conversation({ rows, name, onClose }) {
         </p>
       </div>
     </div>
+    ,
+    document.body,
   )
 }
diff --git a/src/components/LeadFileDialog.jsx b/src/components/LeadFileDialog.jsx
index d60241e..b744e92 100644
--- a/src/components/LeadFileDialog.jsx
+++ b/src/components/LeadFileDialog.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import ClampText from './ClampText.jsx'
 import './LeadFileDialog.css'
 
@@ -59,7 +60,7 @@ export default function LeadFileDialog({ groups, labels, label, money, fileHref,
 
   const found = shownGroups.reduce((n, [, rows]) => n + rows.length, 0)
 
-  return (
+  return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
         className="prose__dlg lfd"
@@ -159,5 +160,7 @@ export default function LeadFileDialog({ groups, labels, label, money, fileHref,
         </div>
       </div>
     </div>
+    ,
+    document.body,
   )
 }
diff --git a/src/components/NewLeadDialog.jsx b/src/components/NewLeadDialog.jsx
index ead30a4..fbddf64 100644
--- a/src/components/NewLeadDialog.jsx
+++ b/src/components/NewLeadDialog.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useNavigate } from 'react-router-dom'
 import ActivityForm from './ActivityForm.jsx'
 import { ENTRY } from '../api/config.js'
@@ -47,7 +48,7 @@ export default function NewLeadDialog({ onClose }) {
     }
   }, [onClose])
 
-  return (
+  return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
         className="prose__dlg nld"
@@ -105,5 +106,7 @@ export default function NewLeadDialog({ onClose }) {
         </div>
       </div>
     </div>
+    ,
+    document.body,
   )
 }