fix(storm-intel): center ZoneAssignmentModal using flex wrapper instead of translate
This commit is contained in:
@@ -43,19 +43,27 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
key="zam-backdrop"
|
||||
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[9998]"
|
||||
onClick={onClose}
|
||||
/>
|
||||
{/* Centering flex wrapper — sits above backdrop, centers modal in viewport */}
|
||||
<motion.div
|
||||
key="zam-wrapper"
|
||||
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[9999] flex items-start justify-center px-4 pt-[8vh] pointer-events-none"
|
||||
>
|
||||
<motion.div
|
||||
key="zam-modal"
|
||||
initial={{ opacity: 0, scale: 0.95, y: 10 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 10 }}
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 32 }}
|
||||
className="fixed inset-x-4 top-[8%] sm:inset-auto sm:left-1/2 sm:-translate-x-1/2 sm:top-[12%] sm:w-[420px] z-[9999] bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-white/[0.08] shadow-2xl overflow-hidden"
|
||||
className="w-full max-w-[420px] pointer-events-auto bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-white/[0.08] shadow-2xl overflow-hidden"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Color accent bar */}
|
||||
<div className="h-1 w-full" style={{ backgroundColor: color }} />
|
||||
@@ -187,6 +195,7 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>{/* end centering wrapper */}
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
|
||||
Reference in New Issue
Block a user