From f2c9c3d118b69c345090f652ef91e867424622ad Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 23 Jul 2026 23:28:55 +0700
Subject: [PATCH] fix(map): FABs bottom-4 inside map container, icon-only
 circles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Root cause: map container is already clipped to exclude bottom nav
  (h-[calc(100dvh-var(--header-mobile)-var(--bottom-nav))]) so
  bottom-[calc(5rem+...)] was pushing buttons ~80px up inside the
  clipped box — wrong and covered filter pills
- Both FABs and right-side pills now use bottom-4 (16px from container edge)
- FABs redesigned as clean 48×48 icon-only circles, no text labels:
    red circle  (+) → Add Spot
    green circle (+) → Add Shop
  thick Plus strokeWidth=3, high-contrast (black on green, white on red)
- Only shown when user is logged in (no logged-out ghost button)

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

diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index a4cf2a8..015241d 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1421,40 +1421,36 @@ export default function MapPage() {
                 </div>
               )}
 
-              {/* Add Spot + Add Shop FABs — always visible, bottom-left, clear of bottom nav */}
-              <div className={cn(
-                "absolute bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] left-3 z-[1001] md:hidden flex flex-col items-start gap-2 transition-all duration-200",
-                mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
-                  ? "opacity-0 pointer-events-none scale-90"
-                  : "opacity-100 scale-100"
-              )}>
-                {user ? (
-                  <>
-                    {/* Add Shop — green */}
-                    <Link to="/create-shop">
-                      <button className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#00cc66] shadow-xl shadow-[#00cc66]/35 border-2 border-white/20 text-black font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap touch-manipulation">
-                        <Plus className="h-5 w-5 flex-shrink-0" />
-                        Add Shop
-                      </button>
-                    </Link>
-                    {/* Add Spot — red */}
-                    <Link to="/create-spot">
-                      <button className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#ff0040] shadow-xl shadow-[#ff0040]/40 border-2 border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform whitespace-nowrap touch-manipulation">
-                        <Plus className="h-5 w-5 flex-shrink-0" />
-                        Add Spot
-                      </button>
-                    </Link>
-                  </>
-                ) : (
-                  <button
-                    onClick={() => document.querySelector<HTMLElement>('[data-login-trigger]')?.click()}
-                    className="flex items-center gap-2 h-12 pl-3 pr-4 rounded-full bg-[#ff0040]/80 shadow-xl shadow-[#ff0040]/30 border-2 border-white/20 text-white font-black text-sm uppercase tracking-wide active:scale-95 transition-transform backdrop-blur whitespace-nowrap touch-manipulation"
-                  >
-                    <Plus className="h-5 w-5 flex-shrink-0" />
-                    Add Spot
-                  </button>
-                )}
-              </div>
+              {/* Add Spot + Add Shop FABs — bottom-left, 16px from bottom of map container
+                  The map container already excludes the bottom nav height, so bottom-4 is correct.
+                  Hidden when overlays open. */}
+              {user && (
+                <div className={cn(
+                  "absolute bottom-4 left-3 z-[1001] md:hidden flex flex-col items-start gap-2.5 transition-all duration-200",
+                  mobileFiltersOpen || selectedSpot || sasquatchPanelOpen
+                    ? "opacity-0 pointer-events-none scale-90"
+                    : "opacity-100 scale-100"
+                )}>
+                  {/* Add Shop — green circle */}
+                  <Link to="/create-shop" aria-label="Add a skate shop">
+                    <button
+                      className="h-12 w-12 rounded-full bg-[#00cc66] shadow-xl shadow-[#00cc66]/40 border-2 border-white/25 flex items-center justify-center active:scale-90 transition-transform touch-manipulation"
+                      aria-label="Add shop"
+                    >
+                      <Plus className="h-6 w-6 text-black" strokeWidth={3} />
+                    </button>
+                  </Link>
+                  {/* Add Spot — red circle */}
+                  <Link to="/create-spot" aria-label="Add a skate spot">
+                    <button
+                      className="h-12 w-12 rounded-full bg-[#ff0040] shadow-xl shadow-[#ff0040]/40 border-2 border-white/25 flex items-center justify-center active:scale-90 transition-transform touch-manipulation"
+                      aria-label="Add spot"
+                    >
+                      <Plus className="h-6 w-6 text-white" strokeWidth={3} />
+                    </button>
+                  </Link>
+                </div>
+              )}
 
               {/* Near Me button + attribution — floating top-right, hidden when any overlay is open */}
               <div className={cn(
@@ -1541,7 +1537,7 @@ export default function MapPage() {
 
               {/* Right-side control column — filter pills + Quick Snap (mobile only, hidden when overlays open) */}
               <div className={cn(
-                "absolute bottom-[calc(5rem+env(safe-area-inset-bottom,0px))] right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-opacity duration-150",
+                "absolute bottom-4 right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-opacity duration-150",
                 mobileFiltersOpen || selectedSpot ? "opacity-0 pointer-events-none" : "opacity-100"
               )}>
                 {/* Layer filter pills — compact icon-only */}