diff --git a/another_prompt b/another_prompt
index 92def34..407d921 100644
--- a/another_prompt
+++ b/another_prompt
@@ -40,3 +40,5 @@ Système de service mails aussi pour les comptes (optionel) pour recovery passwo
 
 --- bugs:
 when disabling attachment sendability: the text "Message" placeholder nto the composer chat are too tigh to the left border, make a fallback padding when no attachment button
+
+make in the settigns: an sub category: changing key, admiting TOTP key/passkey for security
diff --git a/frontend/src/components/dialogs.tsx b/frontend/src/components/dialogs.tsx
index b286947..503f4dd 100644
--- a/frontend/src/components/dialogs.tsx
+++ b/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">
diff --git a/frontend/src/components/ui.tsx b/frontend/src/components/ui.tsx
index f200836..2164b58 100644
--- a/frontend/src/components/ui.tsx
+++ b/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,
   );
 }