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).
This commit is contained in:
Usman Baig
2026-03-13 20:35:04 +01:00
parent 618c4fd5fe
commit d6d42b5759

View File

@@ -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>