Refactor photo display

This commit is contained in:
gpt-engineer-app[bot]
2025-10-02 14:03:03 +00:00
parent b43f794956
commit d00b0ba71a

View File

@@ -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">
{currentPhoto?.caption && (
<h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
{currentPhoto?.filename || `Photo ${currentIndex + 1}`}
{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>