From 80116e06ea45385516318575ee97d6cda6b6d906 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 1 Mar 2026 09:17:42 +0000
Subject: [PATCH] Fix image gallery to display all pictures correctly

Update the image gallery component to use a unique key for each image, preventing errors caused by duplicate file names from different folders.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 53625d0b-481d-4374-b757-211036eafc4b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/ls5p9ni
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/photo-gallery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/photo-gallery.tsx b/client/src/components/photo-gallery.tsx
index f76ff0c..b60c3e1 100644
--- a/client/src/components/photo-gallery.tsx
+++ b/client/src/components/photo-gallery.tsx
@@ -237,7 +237,7 @@ export default function GalleryPage() {
           <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
             {images.map((img, i) => (
               <button
-                key={img.fileName}
+                key={`${img.folder}-${img.fileName}`}
                 onClick={() => setLightboxIndex(i)}
                 className="group relative aspect-square rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer"
                 data-testid={`button-gallery-image-${i}`}