From d6d42b575919d25a541c6e3f1e8bc8da1f0dd6fc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 13 Mar 2026 20:35:04 +0100
Subject: [PATCH] fix: portal delete modal to body so backdrop-blur covers
 header

The modal was rendered inside <main> which is a sibling of the
fixed header. Browser compositing didn't apply backdrop-blur
across the header's separate GPU layer. Using createPortal to
render at document.body matches how the delete account modal
works (rendered as sibling to header via SettingsModalWrapper).
---
 components/settings/OrganizationSettings.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index e2ce1c4..1c1b4b0 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/components/settings/OrganizationSettings.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useCallback, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
@@ -1328,14 +1329,15 @@ export default function OrganizationSettings() {
         </div>
       </div>
 
-      {/* Delete Confirmation Modal */}
+      {/* Delete Confirmation Modal — portal to body so backdrop-blur covers the fixed header */}
+      {typeof document !== 'undefined' && createPortal(
       <AnimatePresence>
         {showDeletePrompt && (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm p-4 pointer-events-none"
+            className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm p-4 pointer-events-none"
           >
             <motion.div
               initial={{ scale: 0.95, opacity: 0 }}
@@ -1432,7 +1434,9 @@ export default function OrganizationSettings() {
             </motion.div>
           </motion.div>
         )}
-      </AnimatePresence>
+      </AnimatePresence>,
+      document.body
+      )}
 
       {/* Cancel subscription confirmation modal */}
       <AnimatePresence>