feat: Implement mobile responsiveness enhancements

src/components/moderation/ItemReviewCard.tsx

@@ -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>