fix(storm-intel): modal z-index, zone click-to-zoom, drawer close on fly-to, left padding

- ZoneAssignmentModal: portal to document.body with z-9999 so it renders above Leaflet map stacking context
- ZoneLayer: clicking any zone polygon or centroid circle fits map bounds to that zone
- handleFlyTo: closes detail drawer after zooming so the map is unobstructed
- StormDetailDrawer: pl-5 on header, body, and footer for consistent left padding
This commit is contained in:
Satyam-Rastogi
2026-05-18 18:29:29 +05:30
parent 12bd2fe0de
commit 84b1e73fa7
2 changed files with 22 additions and 8 deletions
+6 -4
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { X, MapPin, Check } from 'lucide-react';
import { DISPATCH_REPS } from '../../data/mockStore';
@@ -38,14 +39,14 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
});
};
return (
return ReactDOM.createPortal(
<AnimatePresence>
{open && (
<>
<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-[60]"
className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[9998]"
onClick={onClose}
/>
<motion.div
@@ -54,7 +55,7 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
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-[61] bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-white/[0.08] shadow-2xl overflow-hidden"
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"
>
{/* Color accent bar */}
<div className="h-1 w-full" style={{ backgroundColor: color }} />
@@ -188,7 +189,8 @@ const ZoneAssignmentModal = ({ open, onClose, onSave, polygon = [], linkedStormI
</motion.div>
</>
)}
</AnimatePresence>
</AnimatePresence>,
document.body
);
};