Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(storm-intel): center ZoneAssignmentModal using flex wrapper instead of translate

Browse Source
This commit is contained in:
Satyam-Rastogi
2026-05-18 18:33:15 +05:30
parent 84b1e73fa7
commit ada58fa646
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/storm/ZoneAssignmentModal.jsx
+10 -1
View File
@@ -43,19 +43,27 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
<AnimatePresence> <AnimatePresence>
{open && ( {open && (
<> <>
{/* Backdrop */}
<motion.div <motion.div
key="zam-backdrop" key="zam-backdrop"
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[9998]" className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[9998]"
onClick={onClose} 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 <motion.div
key="zam-modal" key="zam-modal"
initial={{ opacity: 0, scale: 0.95, y: 10 }} initial={{ opacity: 0, scale: 0.95, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }} animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 10 }} exit={{ opacity: 0, scale: 0.95, y: 10 }}
transition={{ type: 'spring', stiffness: 380, damping: 32 }} 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 */} {/* Color accent bar */}
<div className="h-1 w-full" style={{ backgroundColor: color }} /> <div className="h-1 w-full" style={{ backgroundColor: color }} />
@@ -187,6 +195,7 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
</button> </button>
</div> </div>
</motion.div> </motion.div>
</motion.div>{/* end centering wrapper */}
</> </>
)} )}
</AnimatePresence>, </AnimatePresence>,