.

frontend/src/components/dialogs.tsx

@@ -101,7 +101,7 @@ export function RecoverDialog({ open, onClose, from }: { open: boolean; onClose:
   }
 
   return (
-    <Modal open={open} onClose={onClose} title="Recover access key" icon={Mail}>
+    <Modal open={open} onClose={onClose} title="Recover access key" icon={Mail} wide>
       {sent ? (
         <div className="space-y-4">
           <p className="text-sm opacity-80">

frontend/src/components/ui.tsx

@@ -268,7 +268,10 @@ export function Modal({
 
   if (!open) return null;
   const Icon = icon;
-  return (
+  // Portal to <body>: ancestors with backdrop-blur / transforms (e.g. the
+  // login card) become containing blocks for fixed elements and would trap
+  // the dialog inside them. Portaling keeps every modal viewport-centered.
+  return createPortal(
     <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center sm:p-4" role="dialog" aria-modal="true">
       <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
       <div
@@ -308,7 +311,8 @@ export function Modal({
         </div>
         {children}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }