From d00b0ba71ad8e571781c5fa851107b6a20eed16a Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 2 Oct 2025 14:03:03 +0000
Subject: [PATCH] Refactor photo display

---
 src/components/moderation/PhotoModal.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/moderation/PhotoModal.tsx b/src/components/moderation/PhotoModal.tsx
index 6e78502b..2db85d5a 100644
--- a/src/components/moderation/PhotoModal.tsx
+++ b/src/components/moderation/PhotoModal.tsx
@@ -93,9 +93,11 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
           {/* Header */}
           <div className={`absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'}`}>
             <div className="text-white">
-              <h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
-                {currentPhoto?.filename || `Photo ${currentIndex + 1}`}
-              </h3>
+              {currentPhoto?.caption && (
+                <h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
+                  {currentPhoto.caption}
+                </h3>
+              )}
               {photos.length > 1 && (
                 <p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
                   {currentIndex + 1} of {photos.length}
@@ -140,7 +142,7 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
           
           {/* Mobile navigation dots */}
           {photos.length > 1 && isMobile && (
-            <div className="absolute bottom-20 left-0 right-0 flex justify-center gap-2 px-4">
+            <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2 px-4">
               {photos.map((_, idx) => (
                 <button
                   key={idx}
@@ -155,13 +157,6 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
               ))}
             </div>
           )}
-
-          {/* Caption */}
-          {currentPhoto?.caption && (
-            <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'} ${isMobile && photos.length > 1 ? 'pb-14' : ''}`}>
-              <p className={`text-white ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentPhoto.caption}</p>
-            </div>
-          )}
         </div>
       </DialogContent>
     </Dialog>