From 3314b7b67aff381ba183e3e9dcdd984e83aee489 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:55:30 +0000
Subject: [PATCH] Refactor: Improve mobile photo modal layout

---
 .../upload/PhotoManagementDialog.tsx          | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/upload/PhotoManagementDialog.tsx b/src/components/upload/PhotoManagementDialog.tsx
index 93c60699..16f78607 100644
--- a/src/components/upload/PhotoManagementDialog.tsx
+++ b/src/components/upload/PhotoManagementDialog.tsx
@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/hooks/use-toast';
-import { ArrowUp, ArrowDown, Trash2, Star, StarOff } from 'lucide-react';
+import { ArrowUp, ArrowDown, Trash2, Star, StarOff, Pencil } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 
 interface Photo {
@@ -294,9 +294,9 @@ export function PhotoManagementDialog({
           <div className="space-y-4">
             {photos.map((photo, index) => (
               <Card key={photo.id}>
-                <CardContent className="p-2 sm:p-4">
-                  <div className="flex gap-2 sm:gap-4">
-                    <div className="w-20 h-20 sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg">
+                <CardContent className="p-3 sm:p-4">
+                  <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                    <div className="w-full aspect-video sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg">
                       <img
                         src={photo.cloudflare_image_url}
                         alt={photo.title || 'Photo'}
@@ -323,47 +323,63 @@ export function PhotoManagementDialog({
                         )}
                       </div>
 
-                      <div className="flex items-center flex-wrap gap-1 sm:gap-2">
+                      <div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-2">
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => movePhoto(photo.id, 'up')}
                           disabled={index === 0}
+                          className="justify-start sm:justify-center"
                         >
-                          <ArrowUp className="w-4 h-4" />
+                          <ArrowUp className="w-4 h-4 mr-2" />
+                          <span className="sm:hidden">Move Up</span>
                         </Button>
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => movePhoto(photo.id, 'down')}
                           disabled={index === photos.length - 1}
+                          className="justify-start sm:justify-center"
                         >
-                          <ArrowDown className="w-4 h-4" />
+                          <ArrowDown className="w-4 h-4 mr-2" />
+                          <span className="sm:hidden">Move Down</span>
                         </Button>
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => toggleFeatured(photo.id)}
+                          className="justify-start sm:justify-center"
                         >
                           {photo.is_featured ? (
-                            <StarOff className="w-4 h-4" />
+                            <>
+                              <StarOff className="w-4 h-4 mr-2" />
+                              <span className="sm:hidden">Remove Featured</span>
+                            </>
                           ) : (
-                            <Star className="w-4 h-4" />
+                            <>
+                              <Star className="w-4 h-4 mr-2" />
+                              <span className="sm:hidden">Set Featured</span>
+                            </>
                           )}
                         </Button>
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => setEditingPhoto(photo)}
+                          className="justify-start sm:justify-center"
                         >
-                          Edit
+                          <Pencil className="w-4 h-4 mr-2" />
+                          <span className="sm:hidden">Edit Details</span>
+                          <span className="hidden sm:inline">Edit</span>
                         </Button>
                         <Button
                           size="sm"
                           variant="destructive"
                           onClick={() => deletePhoto(photo.id)}
+                          className="col-span-2 justify-start sm:justify-center"
                         >
-                          <Trash2 className="w-4 h-4" />
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          <span className="sm:hidden">Delete Photo</span>
                         </Button>
                       </div>
                     </div>