From 8394d006dd9ff5c0a2149647713a6c170c7033a3 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Tue, 29 Sep 2026 17:56:01 +0700
Subject: [PATCH] fix(map): one close button on the spot sheet

SheetContent renders a built-in close X, and SpotBottomSheet adds its own in
the header row - so tapping a spot showed two. Added an opt-in hideClose prop
to SheetContent and used it on the spot sheet (which keeps its own, placed in
the header). Also padded the new mint sheet header clear of the built-in close.
---
 src/components/ui/sheet.tsx | 17 +++++++++++------
 src/pages/MapPage.tsx       |  1 +
 src/pages/MintsPage.tsx     |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 9bc92af..0c4e966 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -49,12 +49,15 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-  VariantProps<typeof sheetVariants> { }
+  VariantProps<typeof sheetVariants> {
+  /** Hide the built-in close button — for sheets that render their own. */
+  hideClose?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, children, hideClose = false, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -63,10 +66,12 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
+      {!hideClose && (
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
     </SheetPrimitive.Content>
   </SheetPortal>
 ))
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index cf1d5c9..a2d654a 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -2058,6 +2058,7 @@ export default function MapPage() {
       <Sheet open={!!selectedSpot} onOpenChange={(open) => { if (!open) setSelectedSpot(null); }}>
         <SheetContent
           side="bottom"
+          hideClose
           className="h-auto max-h-[55vh] rounded-t-2xl px-0 pb-0 bg-black/95 border-t border-white/10"
         >
           <SheetTitle className="sr-only">{selectedSpot?.title ?? 'Spot details'}</SheetTitle>
diff --git a/src/pages/MintsPage.tsx b/src/pages/MintsPage.tsx
index f26cd0d..25f70f8 100644
--- a/src/pages/MintsPage.tsx
+++ b/src/pages/MintsPage.tsx
@@ -320,7 +320,7 @@ export default function MintsPage() {
             {selected && (
               <>
                 <SheetHeader className="pb-3 text-left">
-                  <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-3 pr-8">
                     {selected.iconUrl ? (
                       <img
                         src={selected.iconUrl}