From fae968a54147a774725b16a13b7a68787be48715 Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Fri, 13 Feb 2026 05:58:46 +0530
Subject: [PATCH] Fix PropertyDetailDrawer close button interactivity and
 corner transparency leak

---
 src/components/SpotlightCard.jsx             | 11 ++++++++---
 src/components/maps/PropertyDetailDrawer.jsx |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/SpotlightCard.jsx b/src/components/SpotlightCard.jsx
index 99be2ce..2d78cbb 100644
--- a/src/components/SpotlightCard.jsx
+++ b/src/components/SpotlightCard.jsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 
-export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)" }) => {
+export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", rounded = "rounded-3xl" }) => {
     const divRef = useRef(null);
     const [position, setPosition] = useState({ x: 0, y: 0 });
     const [opacity, setOpacity] = useState(0);
@@ -30,6 +30,11 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
         setOpacity(0);
     };
 
+    // Calculate inner rounding based on outer rounding
+    // If rounded-3xl (24px), inner should be ~22px
+    // If rounded-none (0px), inner should be 0px
+    const innerRounded = rounded === "rounded-none" ? "rounded-none" : "rounded-[22px]";
+
     return (
         <div
             ref={divRef}
@@ -39,7 +44,7 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             // Light: bg-white, Dark: bg-zinc-800
-            className={`group relative rounded-3xl bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
+            className={`group relative ${rounded} bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
         >
             {/* 
         Rainbow Glow Layer 
@@ -61,7 +66,7 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
         - Light Mode: bg-white/90 (Opaque white with slight blur)
         - Dark Mode: bg-zinc-950/90
       */}
-            <div className="absolute inset-[2px] rounded-[22px] bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300" />
+            <div className={`absolute inset-[2px] ${innerRounded} bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300`} />
 
             {/* Surface Shine (Subtle top sheen) */}
             <div
diff --git a/src/components/maps/PropertyDetailDrawer.jsx b/src/components/maps/PropertyDetailDrawer.jsx
index 8309da8..823754e 100644
--- a/src/components/maps/PropertyDetailDrawer.jsx
+++ b/src/components/maps/PropertyDetailDrawer.jsx
@@ -285,7 +285,7 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
             aria-modal="true"
             aria-label="Property Details"
         >
-            <SpotlightCard className="h-full flex flex-col overflow-hidden bg-white/95 dark:bg-zinc-900/95 backdrop-blur-3xl border-l border-white/20 shadow-2xl">
+            <SpotlightCard rounded="rounded-none" className="h-full flex flex-col overflow-hidden bg-white/95 dark:bg-zinc-900/95 backdrop-blur-3xl border-l border-white/20 shadow-2xl">
 
                 {/* Header */}
                 <div className="relative h-32 bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900 dark:to-black p-6 flex flex-col justify-end shrink-0 border-b border-zinc-200 dark:border-white/5">
@@ -294,7 +294,7 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
                     <button
                         ref={closeButtonRef}
                         onClick={onClose}
-                        className="absolute top-4 right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-colors backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500"
+                        className="absolute top-4 right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-all backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500 z-50 cursor-pointer shadow-sm border border-black/5 dark:border-white/5"
                         aria-label="Close property details"
                     >
                         <X size={18} />