From 15a19250934fdcec2cbd69878c0e156550c63394 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 13:34:30 +0000
Subject: [PATCH] Refactor: Improve mobile photo gallery view

---
 src/components/upload/EntityPhotoGallery.tsx | 54 ++++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/upload/EntityPhotoGallery.tsx b/src/components/upload/EntityPhotoGallery.tsx
index 48cad962..28b9e470 100644
--- a/src/components/upload/EntityPhotoGallery.tsx
+++ b/src/components/upload/EntityPhotoGallery.tsx
@@ -102,9 +102,9 @@ export function EntityPhotoGallery({
   if (showUpload) {
     return (
       <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold">Upload Photos for {entityName}</h3>
-          <Button variant="ghost" onClick={() => setShowUpload(false)}>
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0">
+          <h3 className="text-base sm:text-lg font-semibold">Upload Photos for {entityName}</h3>
+          <Button variant="ghost" onClick={() => setShowUpload(false)} className="w-full sm:w-auto">
             Back to Gallery
           </Button>
         </div>
@@ -120,10 +120,10 @@ export function EntityPhotoGallery({
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-12">
+      <div className="flex items-center justify-center py-8 sm:py-12">
         <div className="animate-pulse flex items-center gap-3">
-          <Camera className="w-8 h-8 text-muted-foreground" />
-          <span className="text-muted-foreground">Loading photos...</span>
+          <Camera className="w-6 h-6 sm:w-8 sm:h-8 text-muted-foreground" />
+          <span className="text-sm sm:text-base text-muted-foreground">Loading photos...</span>
         </div>
       </div>
     );
@@ -132,30 +132,30 @@ export function EntityPhotoGallery({
   return (
     <div className="space-y-6">
       {/* Header with Upload and Management Buttons */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0 space-y-3 sm:space-y-0">
         <div>
-          <h3 className="text-lg font-semibold">Photo Gallery</h3>
-          <p className="text-sm text-muted-foreground">
+          <h3 className="text-base sm:text-lg font-semibold">Photo Gallery</h3>
+          <p className="text-sm text-muted-foreground hidden sm:block">
             Share your photos of {entityName}
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
           {isModerator && photos.length > 0 && (
-            <Button onClick={() => setShowManagement(true)} variant="outline" className="gap-2">
+            <Button onClick={() => setShowManagement(true)} variant="outline" className="gap-2 w-full sm:w-auto">
               <Settings className="w-4 h-4" />
-              Manage
+              <span className="sm:inline">Manage</span>
             </Button>
           )}
-          <Button onClick={handleUploadClick} className="gap-2">
+          <Button onClick={handleUploadClick} className="gap-2 w-full sm:w-auto">
             {user ? (
               <>
                 <Upload className="w-4 h-4" />
-                Upload Photos
+                <span className="sm:inline">Upload Photos</span>
               </>
             ) : (
               <>
                 <LogIn className="w-4 h-4" />
-                Sign in to Upload
+                <span className="sm:inline">Sign in to Upload</span>
               </>
             )}
           </Button>
@@ -173,23 +173,23 @@ export function EntityPhotoGallery({
 
       {/* Photo Grid */}
       {photos.length > 0 ? (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
           {photos.map((photo, index) => (
             <Card key={photo.id} className="overflow-hidden">
               <CardContent className="p-0">
                 <img
                   src={photo.url}
                   alt={photo.title || photo.caption || `${entityName} photo`}
-                  className="w-full h-48 object-cover hover:scale-105 transition-transform cursor-pointer"
+                  className="w-full h-48 sm:h-56 md:h-48 object-cover transition-transform cursor-pointer touch-manipulation active:opacity-80 sm:hover:scale-105"
                   onClick={() => handlePhotoClick(index)}
                 />
                 {(photo.title || photo.caption) && (
-                  <div className="p-3">
+                  <div className="p-2 sm:p-3">
                     {photo.title && (
-                      <h4 className="font-medium text-sm truncate">{photo.title}</h4>
+                      <h4 className="font-medium text-xs sm:text-sm line-clamp-2">{photo.title}</h4>
                     )}
                     {photo.caption && (
-                      <p className="text-xs text-muted-foreground truncate mt-1">
+                      <p className="text-[10px] sm:text-xs text-muted-foreground line-clamp-2 mt-1">
                         {photo.caption}
                       </p>
                     )}
@@ -200,22 +200,22 @@ export function EntityPhotoGallery({
           ))}
         </div>
       ) : (
-        <div className="text-center py-12">
-          <Camera className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
-          <h3 className="text-xl font-semibold mb-2">No Photos Yet</h3>
-          <p className="text-muted-foreground mb-4">
+        <div className="text-center py-12 px-4">
+          <Camera className="w-12 h-12 sm:w-16 sm:h-16 text-muted-foreground mx-auto mb-4" />
+          <h3 className="text-lg sm:text-xl font-semibold mb-2">No Photos Yet</h3>
+          <p className="text-sm text-muted-foreground mb-4">
             Be the first to share photos of {entityName}!
           </p>
-          <Button onClick={handleUploadClick} className="gap-2">
+          <Button onClick={handleUploadClick} className="gap-2 w-full sm:w-auto">
             {user ? (
               <>
                 <Upload className="w-4 h-4" />
-                Upload First Photo
+                <span>Upload First Photo</span>
               </>
             ) : (
               <>
                 <LogIn className="w-4 h-4" />
-                Sign in to Upload
+                <span>Sign in to Upload</span>
               </>
             )}
           </Button>