From b86d7eb28bd23124784c0b4d3a5adc8b46daf432 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 2 Jan 2026 01:40:17 -0500
Subject: [PATCH] improve post gallery interactions

---
 src/components/Posts/PostCard.jsx | 38 +++++++++++++++++++++++++++++++
 src/styles/map.css                |  6 +++--
 src/styles/posts.css              | 23 +++++++++++++++++++
 3 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/components/Posts/PostCard.jsx b/src/components/Posts/PostCard.jsx
index fa4fedb..2821d96 100644
--- a/src/components/Posts/PostCard.jsx
+++ b/src/components/Posts/PostCard.jsx
@@ -246,6 +246,16 @@ export default function PostCard({ post, selected, onSelect }) {
     }
     return -1;
   };
+  const findPrevAvailableIndex = (current, failed) => {
+    if (mediaUrls.length === 0) return -1;
+    for (let offset = 1; offset <= mediaUrls.length; offset += 1) {
+      const idx = (current - offset + mediaUrls.length) % mediaUrls.length;
+      if (!failed.has(idx)) {
+        return idx;
+      }
+    }
+    return -1;
+  };
 
   const handleImageError = () => {
     if (!activeImage) {
@@ -314,6 +324,34 @@ export default function PostCard({ post, selected, onSelect }) {
                 {safeImageIndex + 1}/{mediaUrls.length}
               </div>
             )}
+            {mediaUrls.length > 1 && (
+              <>
+                <button
+                  type="button"
+                  className="sw-wall-gallery-arrow left"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const prev = findPrevAvailableIndex(safeImageIndex, failedImageIndices);
+                    if (prev >= 0) setActiveImageIndex(prev);
+                  }}
+                  aria-label="Previous image"
+                >
+                  <i className="fa-solid fa-chevron-left" />
+                </button>
+                <button
+                  type="button"
+                  className="sw-wall-gallery-arrow right"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const next = findNextAvailableIndex(safeImageIndex, failedImageIndices);
+                    if (next >= 0) setActiveImageIndex(next);
+                  }}
+                  aria-label="Next image"
+                >
+                  <i className="fa-solid fa-chevron-right" />
+                </button>
+              </>
+            )}
           </div>
           {mediaUrls.length > 1 && (
             <div className="sw-wall-gallery-thumbs">
diff --git a/src/styles/map.css b/src/styles/map.css
index a21f170..1beea65 100644
--- a/src/styles/map.css
+++ b/src/styles/map.css
@@ -778,8 +778,10 @@
 }
 .create-gallery-items{
   display:flex;
-  flex-wrap:wrap;
-  gap:.4rem;
+  flex-wrap:nowrap;
+  gap:.6rem;
+  overflow-x:auto;
+  padding-bottom:.25rem;
 }
 .create-gallery-item{
   position:relative;
diff --git a/src/styles/posts.css b/src/styles/posts.css
index ccf12ac..cd5c692 100644
--- a/src/styles/posts.css
+++ b/src/styles/posts.css
@@ -178,6 +178,29 @@ body[data-theme="light"] .sw-wall-image-fallback{
   overflow-x:auto;
   padding-bottom:.25rem;
 }
+.sw-wall-gallery-arrow {
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+  width:32px;
+  height:32px;
+  border-radius:50%;
+  border:1px solid rgba(255,255,255,0.4);
+  background:rgba(15,23,42,0.75);
+  color:#f8fafc;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  cursor:pointer;
+  z-index:2;
+  box-shadow:0 0 12px rgba(0,0,0,0.4);
+}
+.sw-wall-gallery-arrow.left {
+  left:12px;
+}
+.sw-wall-gallery-arrow.right {
+  right:12px;
+}
 .sw-wall-gallery-thumb {
   width:48px;
   height:48px;