From ada58fa646cbf45bf799ca125d4f45eb6516507f Mon Sep 17 00:00:00 2001
From: Satyam-Rastogi <satyamrastogi302@gmail.com>
Date: Mon, 18 May 2026 18:33:15 +0530
Subject: [PATCH] fix(storm-intel): center ZoneAssignmentModal using flex
 wrapper instead of translate

---
 src/components/storm/ZoneAssignmentModal.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/storm/ZoneAssignmentModal.jsx b/src/components/storm/ZoneAssignmentModal.jsx
index edd445d..d85be59 100644
--- a/src/components/storm/ZoneAssignmentModal.jsx
+++ b/src/components/storm/ZoneAssignmentModal.jsx
@@ -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>,