From 60c6fa8be5fc8f7c516673d2253bf2ab9c9d940d 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:49:30 +0000
Subject: [PATCH] Fix: Make photo management modal responsive on mobile

---
 src/components/ui/dialog.tsx                   |  2 +-
 .../upload/PhotoManagementDialog.tsx           | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 8249e2f0..150a5a70 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[100vw] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
diff --git a/src/components/upload/PhotoManagementDialog.tsx b/src/components/upload/PhotoManagementDialog.tsx
index 825ffc35..93c60699 100644
--- a/src/components/upload/PhotoManagementDialog.tsx
+++ b/src/components/upload/PhotoManagementDialog.tsx
@@ -220,7 +220,7 @@ export function PhotoManagementDialog({
   if (editingPhoto) {
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-[95vw] sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>Edit Photo</DialogTitle>
             <DialogDescription>Update photo details</DialogDescription>
@@ -274,7 +274,7 @@ export function PhotoManagementDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+      <DialogContent className="max-w-[95vw] sm:max-w-2xl lg:max-w-4xl max-h-[80vh] overflow-y-auto p-3 sm:p-6">
         <DialogHeader>
           <DialogTitle>Manage Photos</DialogTitle>
           <DialogDescription>
@@ -294,9 +294,9 @@ export function PhotoManagementDialog({
           <div className="space-y-4">
             {photos.map((photo, index) => (
               <Card key={photo.id}>
-                <CardContent className="p-4">
-                  <div className="flex gap-4">
-                    <div className="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
+                <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">
                       <img
                         src={photo.cloudflare_image_url}
                         alt={photo.title || 'Photo'}
@@ -307,23 +307,23 @@ export function PhotoManagementDialog({
                     <div className="flex-1 space-y-2">
                       <div className="flex items-start justify-between">
                         <div>
-                          <h4 className="font-semibold">
+                          <h4 className="font-semibold text-sm sm:text-base">
                             {photo.title || 'Untitled'}
                           </h4>
                           {photo.caption && (
-                            <p className="text-sm text-muted-foreground">
+                            <p className="text-xs sm:text-sm text-muted-foreground">
                               {photo.caption}
                             </p>
                           )}
                         </div>
                         {photo.is_featured && (
-                          <span className="text-xs bg-primary text-primary-foreground px-2 py-1 rounded">
+                          <span className="text-[10px] sm:text-xs bg-primary text-primary-foreground px-2 py-1 rounded">
                             Featured
                           </span>
                         )}
                       </div>
 
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center flex-wrap gap-1 sm:gap-2">
                         <Button
                           size="sm"
                           variant="outline"