From 9d906fb4a492f9abcc98d53fce80a07456737a1d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 23 Dec 2025 16:03:58 -0500
Subject: [PATCH] Fix: Simplify marker DOM structure for better map anchoring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed intermediate sw-simple-pin-container div that was causing
issues with MapLibre GL marker positioning. The root element is now
directly a flex container, which should fix pins staying at screen
position instead of following map geography during pan/rotation.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/Map/markerManager.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index e5d2a4b..8931858 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -476,23 +476,15 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
   root.classList.add("sw-appear");
   requestAnimationFrame(() => root.classList.add("sw-appear-in"));
   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";
+  root.style.display = "flex";
+  root.style.flexDirection = "column";
+  root.style.alignItems = "center";
 
   // Marqueur pin avec image en haut et pointe en bas
   root.innerHTML = `
-    <div class="sw-simple-pin-container" style="
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 40px;
-      height: 52px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    ">
       <div class="sw-simple-marker" style="
         width: 32px;
         height: 32px;
@@ -527,7 +519,6 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
         margin-top: -2px;
         z-index: 1;
       "></div>
-    </div>
     <div class="sw-simple-hover-card" style="
       position: absolute;
       bottom: 100%;