update frontend

src/components/Map/MapView.jsx

@@ -247,19 +247,29 @@ export default function MapView() {
     }
   }, [mainFilter, bottomCategories, subFilter]);
 
-  /* ================= MARKERS & TIME FILTER ================= */
+  /* ================= MARKERS & FILTERS ================= */
 
-  const rebuildMarkersForTimeFilter = (tf) => {
+  const rebuildMarkersForFilters = (tf) => {
     const map = mapRef.current;
     if (!map) return;
 
     clearAllMarkers(markersRef, expandedElRef);
 
     const posts = allPostsRef.current || [];
+    const catCode = categoryCode(mainFilter);
 
-    const visible = posts.filter((p) =>
-      matchesTimeFilter(p.created_at || p.CreatedAt, tf)
-    );
+    const visible = posts.filter((p) => {
+      // catégorie
+      if (catCode) {
+        const pc = (p.category || p.Category || "").toString().toUpperCase();
+        if (pc !== catCode) return false;
+      }
+      // sous-catégorie
+      if (!matchesSubFilter(p, subFilter)) return false;
+      // temps
+      if (!matchesTimeFilter(p.created_at || p.CreatedAt, tf)) return false;
+      return true;
+    });
 
     visible.forEach((post) => {
       createMarkerForPost(post, mapRef, markersRef, expandedElRef);
@@ -342,7 +352,7 @@ export default function MapView() {
           filterKey,
         };
 
-        rebuildMarkersForTimeFilter(timeFilter);
+        rebuildMarkersForFilters(timeFilter);
         setLoadingPosts(false);
       } catch (err) {
         console.error("Erreur chargement posts:", err);
@@ -363,7 +373,7 @@ export default function MapView() {
   }, [viewParams, mainFilter, subFilter]);
 
   useEffect(() => {
-    rebuildMarkersForTimeFilter(timeFilter);
+    rebuildMarkersForFilters(timeFilter);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeFilter]);
 
@@ -393,12 +403,9 @@ export default function MapView() {
           const p = msg.post;
 
           const catCode = categoryCode(mainFilter);
-          if (
-            catCode &&
-            p.category &&
-            p.category.toUpperCase() !== catCode
-          ) {
-            return;
+          if (catCode) {
+            const pc = (p.category || p.Category || "").toString().toUpperCase();
+            if (pc !== catCode) return;
           }
 
           if (!matchesSubFilter(p, subFilter)) return;
@@ -727,7 +734,7 @@ export default function MapView() {
         </div>
       )}
 
-      {/* SOCIOWALL + CHAT EN BAS */}
+      {/* SOCIOWALL + CHAT EN BAS (overlay) */}
       <div className="map-overlay map-overlay-wall">
         <div className="sociowall-panel">
           <div className="sociowall-header">Sociowall</div>

src/styles/posts.css

@@ -11,10 +11,7 @@
   gap: 0.6rem;
   align-items: stretch;
   pointer-events: none;
-  /* IMPORTANT :
-     z-index plus bas que les autres overlays (20)
-     pour que les filtres restent au-dessus si ça se chevauche */
-  z-index: 10;
+  z-index: 10; /* plus bas que les autres overlays */
 }
 
 .map-overlay-wall * {
@@ -25,8 +22,8 @@
 
 .sociowall-panel {
   flex: 1.5;
-  min-height: 90px;    /* plus compact */
-  max-height: 170px;   /* n’empiète pas trop sur la map */
+  min-height: 90px;
+  max-height: 150px;   /* hauteur bloquée → n’envahit pas la map */
   background: rgba(15, 23, 42, 0.96);
   border-radius: 14px;
   border: 1px solid rgba(148, 163, 184, 0.9);
@@ -51,7 +48,7 @@
 
 .post-list {
   flex: 1;
-  overflow-y: auto;
+  overflow-y: auto;     /* c’est ici que ça scrolle */
   padding-right: 0.15rem;
 }
 
@@ -145,7 +142,7 @@
 .chat-panel {
   width: 150px;
   min-width: 130px;
-  max-height: 170px;  /* même hauteur que le wall */
+  max-height: 150px;
   background: rgba(15, 23, 42, 0.96);
   border-radius: 14px;
   border: 1px solid rgba(148, 163, 184, 0.9);