Show gallery row under preview

src/components/Map/MapView.jsx

@@ -1453,6 +1453,9 @@ export default function MapView({
     draftImageMedium ||
     draftImageSmall ||
     draftImage;
+  const galleryItems = draftMediaUrls.filter(
+    (url) => url && url !== LINK_PREVIEW_PLACEHOLDER
+  );
   const isLinkMode = contentMode === "link";
 
   return (
@@ -1707,33 +1710,28 @@ export default function MapView({
                 {createStep === 2 && (
                   <>
                 {isLinkMode && galleryPreviewImage && (
-                      <div className="create-link-preview create-link-preview-tight">
+                  <div className="create-link-preview create-link-preview-tight">
-                        <img src={galleryPreviewImage} alt="Link preview" />
+                    <img src={galleryPreviewImage} alt="Link preview" />
-                        <div className="create-link-preview-meta">
+                    <div className="create-link-preview-meta">
-                          {draftSource ? <span>{draftSource}</span> : null}
+                      {draftSource ? <span>{draftSource}</span> : null}
-                          {draftPublishedAt ? (
+                      {draftPublishedAt ? (
-                            <span>{formatPreviewDate(draftPublishedAt)}</span>
+                        <span>{formatPreviewDate(draftPublishedAt)}</span>
-                          ) : null}
+                      ) : null}
-                        </div>
+                    </div>
-                        {draftMediaUrls.length > 1 && (
+                    {galleryItems.length > 1 && (
-                          <div className="create-gallery-items create-gallery-overlay">
+                      <div className="create-gallery-row">
-                            {draftMediaUrls.slice(1).map((url, idx) => (
+                        {galleryItems.map((url, idx) => (
-                              <figure key={`${url}-${idx}`} className="create-gallery-item">
+                          <figure
-                                <img src={url} alt={`Selected image ${idx + 2}`} />
+                            key={`${url}-${idx}`}
-                                <button
+                            className="create-gallery-item create-gallery-static"
-                                  type="button"
+                          >
-                                  className="create-gallery-remove"
+                            <img src={url} alt={`Selected image ${idx + 1}`} />
-                                  onClick={() => removeMediaUrlAtIndex(idx + 1)}
+                          </figure>
-                                  aria-label="Remove image"
+                        ))}
-                                >
-                                  ×
-                                </button>
-                              </figure>
-                            ))}
-                          </div>
-                        )}
                       </div>
                     )}
+                  </div>
+                    )}
                     <textarea
                       className="create-textarea create-textarea-tight"
                       rows={3}

src/styles/map.css

@@ -811,6 +811,27 @@
   justify-content:center;
   cursor:pointer;
 }
+.create-gallery-row{
+  display:flex;
+  gap:.35rem;
+  margin-top:.6rem;
+  overflow-x:auto;
+  padding-bottom:.25rem;
+}
+.create-gallery-static{
+  width:48px;
+  height:48px;
+  border-radius:12px;
+  border:1px solid rgba(255,255,255,0.3);
+  overflow:hidden;
+  flex:0 0 auto;
+}
+.create-gallery-static img{
+  width:100%;
+  height:100%;
+  object-fit:cover;
+  display:block;
+}
 .create-link-preview{
   position:relative;
   overflow:hidden;