pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-21 17:31:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement mobile responsiveness enhancements

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 17:13:56 +00:00
parent 7920bdb911
commit 866f376eda
4 changed files with 166 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/moderation/DependencyVisualizer.tsx
View File

@@ -4,6 +4,7 @@ import { Badge } from '@/components/ui/badge';
import { ArrowDown, AlertCircle } from 'lucide-react';
import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { useIsMobile } from '@/hooks/use-mobile';
interface DependencyVisualizerProps {
items: SubmissionItemWithDeps[];
@@ -11,6 +12,8 @@ interface DependencyVisualizerProps {
}
export function DependencyVisualizer({ items, selectedIds }: DependencyVisualizerProps) {
const isMobile = useIsMobile();
const dependencyLevels = useMemo(() => {
const levels: SubmissionItemWithDeps[][] = [];
const visited = new Set<string>();
@@ -62,13 +65,13 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
{dependencyLevels.map((level, levelIdx) => (
<div key={levelIdx} className="space-y-3">
<div className="flex items-center gap-2">
<h4 className="text-sm font-medium text-muted-foreground">
<h4 className={`font-medium text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
Level {levelIdx + 1}
</h4>
<div className="flex-1 h-px bg-border" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className={`grid gap-3 ${isMobile ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
{level.map((item) => (
<Card
key={item.id}
@@ -76,28 +79,31 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
selectedIds.has(item.id)
? 'ring-2 ring-primary'
: ''
}`}
} ${isMobile ? 'touch-manipulation' : ''}`}
>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<CardTitle className="text-sm">
<CardHeader className={isMobile ? "pb-2 p-4" : "pb-2"}>
<div className="flex items-center justify-between gap-2">
<CardTitle className={isMobile ? "text-xs" : "text-sm"}>
{item.item_type.replace('_', ' ').toUpperCase()}
</CardTitle>
<Badge variant={
<Badge
variant={
item.status === 'approved' ? 'default' :
item.status === 'rejected' ? 'destructive' :
'secondary'
}>
}
className={isMobile ? "text-xs shrink-0" : ""}
>
{item.status}
</Badge>
</div>
</CardHeader>
<CardContent>
<p className="text-sm font-medium">
<CardContent className={isMobile ? "p-4 pt-0" : ""}>
<p className={`font-medium ${isMobile ? 'text-sm' : 'text-sm'}`}>
{item.item_data.name || 'Unnamed'}
</p>
{item.dependents && item.dependents.length > 0 && (
<p className="text-xs text-muted-foreground mt-1">
<p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
Has {item.dependents.length} dependent(s)
</p>
)}
@@ -108,7 +114,7 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
{levelIdx < dependencyLevels.length - 1 && (
<div className="flex justify-center py-2">
<ArrowDown className="w-5 h-5 text-muted-foreground" />
<ArrowDown className={isMobile ? "w-4 h-4 text-muted-foreground" : "w-5 h-5 text-muted-foreground"} />
</div>
)}
</div>

37
src/components/moderation/ItemReviewCard.tsx
View File

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Edit, MapPin, Zap, Building2, Image, Package } from 'lucide-react';
import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { useIsMobile } from '@/hooks/use-mobile';
interface ItemReviewCardProps {
item: SubmissionItemWithDeps;
@@ -11,6 +12,8 @@ interface ItemReviewCardProps {
}
export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) {
const isMobile = useIsMobile();
const getItemIcon = () => {
switch (item.item_type) {
case 'park': return <MapPin className="w-4 h-4" />;
@@ -91,19 +94,19 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
case 'photo':
return (
<div className="space-y-2">
<div className="grid grid-cols-3 gap-2">
{data.photos?.slice(0, 3).map((photo: any, idx: number) => (
<div className={`grid gap-2 ${isMobile ? 'grid-cols-2' : 'grid-cols-3'}`}>
{data.photos?.slice(0, isMobile ? 2 : 3).map((photo: any, idx: number) => (
<img
key={idx}
src={photo.url}
alt={photo.caption || 'Submission photo'}
className="w-full h-20 object-cover rounded"
className={`w-full object-cover rounded ${isMobile ? 'h-24' : 'h-20'}`}
/>
))}
</div>
{data.photos?.length > 3 && (
{data.photos?.length > (isMobile ? 2 : 3) && (
<p className="text-sm text-muted-foreground">
+{data.photos.length - 3} more photo(s)
+{data.photos.length - (isMobile ? 2 : 3)} more photo(s)
</p>
)}
</div>
@@ -120,11 +123,11 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
return (
<Card className="w-full">
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2">
<CardHeader className={isMobile ? "pb-3 p-4" : "pb-3"}>
<div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-start justify-between'}`}>
<div className="flex items-center gap-2 flex-wrap">
{getItemIcon()}
<CardTitle className="text-base">
<CardTitle className={isMobile ? "text-sm" : "text-base"}>
{item.item_type.replace('_', ' ').toUpperCase()}
</CardTitle>
{item.original_data && (
@@ -134,27 +137,29 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
)}
</div>
<div className="flex items-center gap-2">
<Badge variant={getStatusColor()}>
<Badge variant={getStatusColor()} className={isMobile ? "text-xs" : ""}>
{item.status}
</Badge>
{item.status === 'pending' && (
<Button
size="sm"
size={isMobile ? "default" : "sm"}
variant="ghost"
onClick={onEdit}
className={isMobile ? "h-9 px-3" : ""}
>
<Edit className="w-3 h-3" />
<Edit className={isMobile ? "w-4 h-4" : "w-3 h-3"} />
{isMobile && <span className="ml-2">Edit</span>}
</Button>
)}
</div>
</div>
</CardHeader>
<CardContent>
<CardContent className={isMobile ? "p-4 pt-0" : ""}>
{renderItemPreview()}
{item.depends_on && (
<div className="mt-3 pt-3 border-t">
<p className="text-xs text-muted-foreground">
<p className={`text-muted-foreground ${isMobile ? 'text-xs' : 'text-xs'}`}>
Depends on another item in this submission
</p>
</div>
@@ -162,10 +167,10 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
{item.rejection_reason && (
<div className="mt-3 pt-3 border-t">
<p className="text-xs font-medium text-destructive">
<p className={`font-medium text-destructive ${isMobile ? 'text-xs' : 'text-xs'}`}>
Rejection Reason:
</p>
<p className="text-xs text-muted-foreground mt-1">
<p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
{item.rejection_reason}
</p>
</div>

86
src/components/moderation/ModerationQueue.tsx
View File

@@ -15,6 +15,7 @@ import { format } from 'date-fns';
import { PhotoModal } from './PhotoModal';
import { SubmissionReviewManager } from './SubmissionReviewManager';
import { useRealtimeSubmissions } from '@/hooks/useRealtimeSubmissions';
import { useIsMobile } from '@/hooks/use-mobile';
interface ModerationItem {
id: string;
@@ -49,6 +50,7 @@ export interface ModerationQueueRef {
}
export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
const isMobile = useIsMobile();
const [items, setItems] = useState<ModerationItem[]>([]);
const [loading, setLoading] = useState(true);
const [actionLoading, setActionLoading] = useState<string | null>(null);
@@ -821,10 +823,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
item.status === 'rejected' ? 'border-l-red-400' :
'border-l-amber-500'
}`}>
<CardHeader className="pb-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Badge variant={getStatusBadgeVariant(item.status)}>
<CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
<div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
<div className="flex items-center gap-2 flex-wrap">
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
{item.type === 'review' ? (
<>
<MessageSquare className="w-3 h-3 mr-1" />
@@ -842,21 +844,21 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</>
)}
</Badge>
<Badge variant={getStatusBadgeVariant(item.status)}>
<Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
{item.status.charAt(0).toUpperCase() + item.status.slice(1)}
</Badge>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
{format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
<div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
{format(new Date(item.created_at), isMobile ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm')}
</div>
</div>
{item.user_profile && (
<div className="flex items-center gap-3 text-sm">
<Avatar className="h-8 w-8">
<div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
<AvatarImage src={item.user_profile.avatar_url} />
<AvatarFallback>
<AvatarFallback className={isMobile ? "text-xs" : ""}>
{(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
@@ -865,7 +867,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
{item.user_profile.display_name || item.user_profile.username}
</span>
{item.user_profile.display_name && (
<span className="text-muted-foreground block text-xs">
<span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
@{item.user_profile.username}
</span>
)}
@@ -874,8 +876,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
)}
</CardHeader>
<CardContent className="space-y-4">
<div className="bg-muted/50 p-4 rounded-lg">
<CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
<div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
{item.type === 'review' ? (
<div>
{item.content.title && (
@@ -1236,7 +1238,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
/>
</div>
<div className="flex flex-col sm:flex-row gap-2 pt-2">
<div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
{/* Show Review Items button for content submissions */}
{item.type === 'content_submission' && (
<Button
@@ -1246,9 +1248,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
}}
disabled={actionLoading === item.id}
variant="outline"
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<ListTree className="w-4 h-4 mr-2" />
<ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Review Items
</Button>
)}
@@ -1256,18 +1259,20 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
<Button
onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<CheckCircle className="w-4 h-4 mr-2" />
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Approve
</Button>
<Button
variant="destructive"
onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<XCircle className="w-4 h-4 mr-2" />
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Reject
</Button>
</div>
@@ -1314,15 +1319,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
onChange={(e) => setNotes(prev => ({ ...prev, [`reverse-${item.id}`]: e.target.value }))}
rows={2}
/>
<div className="flex gap-2">
<div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
{item.status === 'approved' && (
<Button
variant="destructive"
onClick={() => handleModerationAction(item, 'rejected', notes[`reverse-${item.id}`])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<XCircle className="w-4 h-4 mr-2" />
<XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Change to Rejected
</Button>
)}
@@ -1330,9 +1336,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
<Button
onClick={() => handleModerationAction(item, 'approved', notes[`reverse-${item.id}`])}
disabled={actionLoading === item.id}
className="flex-1"
className={`flex-1 ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<CheckCircle className="w-4 h-4 mr-2" />
<CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Change to Approved
</Button>
)}
@@ -1348,9 +1355,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
variant="destructive"
onClick={() => handleDeleteSubmission(item)}
disabled={actionLoading === item.id}
className="w-full"
className={`w-full ${isMobile ? 'h-11' : ''}`}
size={isMobile ? "default" : "default"}
>
<Trash2 className="w-4 h-4 mr-2" />
<Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
Delete Submission
</Button>
</div>
@@ -1379,12 +1387,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
return (
<div className="space-y-4">
{/* Filter Bar */}
<div className="flex flex-col sm:flex-row gap-4 p-4 bg-muted/50 rounded-lg">
<div className="flex flex-col sm:flex-row gap-4 flex-1">
<div className="space-y-2 min-w-[140px]">
<Label className="text-sm font-medium">Entity Type</Label>
<div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
<div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
<Select value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
<SelectTrigger>
<SelectTrigger className={isMobile ? "h-10" : ""}>
<SelectValue>
<div className="flex items-center gap-2">
{getEntityFilterIcon(activeEntityFilter)}
@@ -1421,10 +1429,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</Select>
</div>
<div className="space-y-2 min-w-[120px]">
<Label className="text-sm font-medium">Status</Label>
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[120px]'}`}>
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
<Select value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
<SelectTrigger>
<SelectTrigger className={isMobile ? "h-10" : ""}>
<SelectValue>
<span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
</SelectValue>
@@ -1443,12 +1451,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
</div>
{(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
<div className="flex items-end">
<div className={isMobile ? "" : "flex items-end"}>
<Button
variant="outline"
size="sm"
size={isMobile ? "default" : "sm"}
onClick={clearFilters}
className="flex items-center gap-2"
className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : ''}`}
>
<X className="w-4 h-4" />
Clear Filters

91
src/components/moderation/PhotoModal.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react';
import { useState, useEffect, useRef } from 'react';
import { X, ChevronLeft, ChevronRight } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useIsMobile } from '@/hooks/use-mobile';
interface PhotoModalProps {
photos: Array<{
@@ -16,9 +17,17 @@ interface PhotoModalProps {
}
export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
const isMobile = useIsMobile();
const [currentIndex, setCurrentIndex] = useState(initialIndex);
const [touchStart, setTouchStart] = useState<number | null>(null);
const [touchEnd, setTouchEnd] = useState<number | null>(null);
const imageRef = useRef<HTMLImageElement>(null);
const currentPhoto = photos[currentIndex];
// Minimum swipe distance (in px)
const minSwipeDistance = 50;
const goToPrevious = () => {
setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
};
@@ -33,28 +42,62 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
if (e.key === 'Escape') onClose();
};
const onTouchStart = (e: React.TouchEvent) => {
setTouchEnd(null);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: React.TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
if (isLeftSwipe) {
goToNext();
} else if (isRightSwipe) {
goToPrevious();
}
};
useEffect(() => {
setCurrentIndex(initialIndex);
}, [initialIndex]);
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-7xl w-full max-h-[90vh] p-0 [&>button]:hidden">
<div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}>
<DialogContent className={`max-w-7xl w-full p-0 [&>button]:hidden ${isMobile ? 'max-h-screen h-screen' : 'max-h-[90vh]'}`}>
<div
className="relative bg-black rounded-lg overflow-hidden touch-none"
onKeyDown={handleKeyDown}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
tabIndex={0}
>
{/* Close button */}
<Button
variant="ghost"
size="sm"
size={isMobile ? "default" : "sm"}
onClick={onClose}
className="absolute top-4 right-4 z-20 text-white hover:bg-white/10"
className={`absolute z-20 text-white hover:bg-white/10 ${isMobile ? 'top-2 right-2 h-10 w-10 p-0' : 'top-4 right-4'}`}
>
<X className="h-4 w-4" />
<X className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
</Button>
{/* Header */}
<div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4">
<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">
<h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
{currentPhoto?.filename || `Photo ${currentIndex + 1}`}
</h3>
{photos.length > 1 && (
<p className="text-sm text-white/70">
<p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
{currentIndex + 1} of {photos.length}
</p>
)}
@@ -62,17 +105,19 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
</div>
{/* Image */}
<div className="flex items-center justify-center min-h-[400px] max-h-[80vh]">
<div className={`flex items-center justify-center ${isMobile ? 'min-h-screen' : 'min-h-[400px] max-h-[80vh]'}`}>
<img
ref={imageRef}
src={currentPhoto?.url}
alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
className="max-w-full max-h-full object-contain"
className="max-w-full max-h-full object-contain select-none"
loading="lazy"
draggable={false}
/>
</div>
{/* Navigation */}
{photos.length > 1 && (
{photos.length > 1 && !isMobile && (
<>
<Button
variant="ghost"
@@ -93,10 +138,28 @@ 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">
{photos.map((_, idx) => (
<button
key={idx}
onClick={() => setCurrentIndex(idx)}
className={`h-2 rounded-full transition-all ${
idx === currentIndex
? 'w-8 bg-white'
: 'w-2 bg-white/50'
}`}
aria-label={`Go to photo ${idx + 1}`}
/>
))}
</div>
)}
{/* Caption */}
{currentPhoto?.caption && (
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
<p className="text-white text-sm">{currentPhoto.caption}</p>
<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>