From 266292eba22d7c53e7c780205e3729e72568ab93 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 23 Dec 2025 15:48:01 -0500
Subject: [PATCH] Final polish: Remove duplicate buttons, fix pin anchoring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Remove Duplicate Buttons (MapView.jsx):
   - Removed "My spot" and "New wire" buttons from map-top-actions
   - These functions already available in SmartSearchBar icons
   - Cleaner UI, less clutter

2. Fix Pin Anchoring - Pins Stay Fixed Now! (markerManager.js):
   - Root element now has fixed dimensions: width:40px, height:52px
   - Pin container positioned absolute bottom:0 (ensures correct anchor point)
   - Hover card uses bottom:100% instead of fixed pixel value
   - Transform includes translateY(-6px) for proper spacing
   - Result: Pins remain perfectly fixed at geographic position during zoom/pan

Pin DOM structure now:
```
<div root style="width:40px;height:52px"> (anchor bottom here)
  <div container style="position:absolute;bottom:0">
    <circle>image</circle>
    <triangle>point</triangle>
  </div>
  <div hover-card style="bottom:100%">preview</div>
</div>
```

The key: Root has explicit height, pin container at bottom,
so MapLibre anchor:"bottom" aligns triangle point with lat/lon

Tested: Pins now stay locked to position on zoom/pan ✅

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/Map/MapView.jsx      | 25 -------------------------
 src/components/Map/markerManager.js | 14 +++++++++-----
 2 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx
index a7eabfb..883504d 100644
--- a/src/components/Map/MapView.jsx
+++ b/src/components/Map/MapView.jsx
@@ -452,31 +452,6 @@ export default function MapView({
               onMySpot={handleFlyToMe}
               onPlaceTourWire={handleOpenCreate}
             />
-
-            <div className="map-top-actions">
-              <button
-                type="button"
-                className="map-action-btn"
-                onClick={handleFlyToMe}
-                disabled={!userPosition}
-              >
-                <div className="map-action-icon">
-                  <i className="fa-solid fa-location-crosshairs" />
-                </div>
-                <div className="map-action-label">My spot</div>
-              </button>
-
-              <button
-                type="button"
-                className="map-action-btn"
-                onClick={handleOpenCreate}
-              >
-                <div className="map-action-icon">
-                  <i className="fa-solid fa-bolt" />
-                </div>
-                <div className="map-action-label">New wire</div>
-              </button>
-            </div>
           </div>
         </div>
 
diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index b0b36a9..e5d2a4b 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -478,11 +478,15 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
   root.className = "post-pin--simple sw-appear sw-appear-in";
   root.style.position = "relative";
   root.style.cursor = "pointer";
+  root.style.width = "40px";
+  root.style.height = "52px";
 
   // Marqueur pin avec image en haut et pointe en bas
   root.innerHTML = `
     <div class="sw-simple-pin-container" style="
-      position: relative;
+      position: absolute;
+      bottom: 0;
+      left: 0;
       width: 40px;
       height: 52px;
       display: flex;
@@ -526,9 +530,9 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
     </div>
     <div class="sw-simple-hover-card" style="
       position: absolute;
-      bottom: 58px;
+      bottom: 100%;
       left: 50%;
-      transform: translateX(-50%) scale(0.9);
+      transform: translateX(-50%) translateY(-6px) scale(0.9);
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s ease, transform 0.2s ease;
@@ -566,7 +570,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
     }
     if (hoverCard) {
       hoverCard.style.opacity = "1";
-      hoverCard.style.transform = "translateX(-50%) scale(1)";
+      hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(1)";
     }
   });
 
@@ -577,7 +581,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
     }
     if (hoverCard) {
       hoverCard.style.opacity = "0";
-      hoverCard.style.transform = "translateX(-50%) scale(0.9)";
+      hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(0.9)";
     }
   });