improve post gallery interactions

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">

src/styles/map.css

@@ -778,8 +778,10 @@
 }
 .create-gallery-items{
   display:flex;
-  flex-wrap:wrap;
+  flex-wrap:nowrap;
-  gap:.4rem;
+  gap:.6rem;
+  overflow-x:auto;
+  padding-bottom:.25rem;
 }
 .create-gallery-item{
   position:relative;

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;