From 3e6fc305ac4f4fda1c17c8564b17cbe2e3a68f12 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 21:07:57 +0700
Subject: [PATCH] map: shrink filter pills to h-7 w-7, hide right column + Near
 Me when filter sheet open

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/pages/MapPage.tsx | 42 ++++++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 4886a4b..ded1fe2 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1322,8 +1322,11 @@ export default function MapPage() {
                 </div>
               )}
 
-              {/* Near Me button + attribution — floating top-right */}
-              <div className="absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5">
+              {/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
+              <div className={cn(
+                "absolute top-4 right-4 z-[1000] flex flex-col items-end gap-1.5 transition-opacity duration-150",
+                mobileFiltersOpen ? "opacity-0 pointer-events-none" : "opacity-100"
+              )}>
                 <Button
                   onClick={handleNearMe}
                   disabled={nearMeLoading}
@@ -1349,23 +1352,26 @@ export default function MapPage() {
                 </div>
               </div>
 
-              {/* Right-side control column — filter pills + Quick Snap (mobile only) */}
-              <div className="absolute bottom-24 right-4 z-[1000] md:hidden flex flex-col items-center gap-2">
-                {/* Layer filter pills */}
+              {/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
+              <div className={cn(
+                "absolute bottom-24 right-3 z-[1000] md:hidden flex flex-col items-center gap-1.5 transition-opacity duration-150",
+                mobileFiltersOpen ? "opacity-0 pointer-events-none" : "opacity-100"
+              )}>
+                {/* Layer filter pills — compact icon-only */}
                 {[
-                  { key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), color: 'bg-red-500' },
-                  { key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), color: 'bg-purple-600' },
-                  { key: 'gear', label: '🛒', active: showGear, toggle: () => setShowGear(v => !v), color: 'bg-orange-500' },
-                  { key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), color: 'bg-cyan-500' },
-                ].map(({ key, label, active, toggle, color }) => (
+                  { key: 'spots', label: '🛹', active: showSpots, toggle: () => setShowSpots(v => !v), activeColor: 'bg-red-500/90' },
+                  { key: 'shops', label: '🏪', active: showShops, toggle: () => setShowShops(v => !v), activeColor: 'bg-purple-600/90' },
+                  { key: 'gear',  label: '🛒', active: showGear,  toggle: () => setShowGear(v => !v),  activeColor: 'bg-orange-500/90' },
+                  { key: 'tours', label: '🗺️', active: showTours, toggle: () => setShowTours(v => !v), activeColor: 'bg-cyan-500/90' },
+                ].map(({ key, label, active, toggle, activeColor }) => (
                   <button
                     key={key}
                     onClick={toggle}
                     className={cn(
-                      'h-9 w-9 rounded-full text-sm flex items-center justify-center shadow-lg border transition-all backdrop-blur',
+                      'h-7 w-7 rounded-full text-xs flex items-center justify-center shadow-md border transition-all',
                       active
-                        ? `${color} border-white/30`
-                        : 'bg-black/70 border-white/10 opacity-40'
+                        ? `${activeColor} border-white/20 shadow-black/30`
+                        : 'bg-black/60 border-white/8 opacity-35'
                     )}
                     title={key}
                   >
@@ -1374,19 +1380,19 @@ export default function MapPage() {
                 ))}
 
                 {/* Divider */}
-                {user && <div className="w-5 h-px bg-white/20" />}
+                {user && <div className="w-4 h-px bg-white/15 my-0.5" />}
 
                 {/* Quick Snap */}
                 {user && (
                   <>
                     <Button
                       onClick={() => setShowQuickCamera(true)}
-                      className="h-14 w-14 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20"
+                      className="h-12 w-12 rounded-full bg-[#ff0040] hover:bg-[#ff0040]/90 shadow-lg shadow-[#ff0040]/25 border-2 border-white/20"
                     >
-                      <Camera className="h-6 w-6" />
+                      <Camera className="h-5 w-5" />
                     </Button>
-                    <span className="text-xs text-white font-bold whitespace-nowrap bg-black/70 px-2 py-0.5 rounded">
-                      Quick Snap
+                    <span className="text-[10px] text-white/60 font-bold whitespace-nowrap">
+                      Snap
                     </span>
                   </>
                 )}