fix(cf-modal): portal to body + auto-close on parcel switch

Two related issues with the modal when the user kept clicking
around the map while in CF order mode:

1. LAYOUT BREAK (Marius screenshot — modal header clipped above
   viewport): The V2 panel wrapper uses `backdrop-blur-md`. Per CSS
   spec, an element with non-none backdrop-filter establishes a
   containing block for `fixed`-positioned descendants. So
   `fixed inset-0` on the modal was relative to the panel
   (top-right, ~50px tall at min) instead of the viewport — the
   modal anchored to the panel and overflowed up. Fix: render via
   React's createPortal to document.body. The modal now escapes the
   panel's stacking context entirely and centers in the viewport.

   Also bumped z-index from 50 to 100 so the modal stays above the
   MapLibre canvas + panel itself.

2. STATE CARRY-OVER: clicking a different parcel while the modal
   was open silently re-targeted the modal at the new parcel — same
   modal showing different cadref/sold mid-flow could mislead the
   user about which parcel they were buying CF for. Fix:
   FeatureInfoPanel now has a useEffect that closes the modal when
   feature.cadastralRef / siruta / layerId changes. Modal stays
   scoped to a single decision.

SSR guard: if (typeof document === "undefined") return null; before
the portal call so the modal doesn't blow up during server-side
render.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude VM
2026-05-20 08:30:26 +03:00
parent ad89da690f
commit 52e16e7807
2 changed files with 18 additions and 3 deletions
@@ -406,6 +406,13 @@ export function FeatureInfoPanel({ feature, onClose, onSelectFeature, basic = fa
const [condoLoading, setCondoLoading] = useState(false);
const [cfModalOpen, setCfModalOpen] = useState(false);
// Close the CF modal whenever the user switches to a different
// parcel — keeps the modal scoped to a single decision instead of
// silently re-targeting mid-flight.
useEffect(() => {
setCfModalOpen(false);
}, [feature.cadastralRef, feature.siruta, feature.layerId]);
const authRetriedRef = useRef<boolean>(
typeof window !== "undefined" &&
sessionStorage.getItem(AUTH_RETRY_KEY) === "1",