Improve media display and image aspect ratio handling for social posts

Update Cloudinary transformations to use 'pad' crop instead of 'fill' for better aspect ratio preservation and add click functionality to media items in the upload component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/4KAFpKS

client/src/components/media-upload.tsx

@@ -115,7 +115,8 @@ export default function MediaUpload() {
               {(mediaList as any[])?.slice(0, 3).map((media: any) => (
                 <div
                   key={media.id}
-                  className="flex items-center gap-3 p-3 rounded-lg bg-accent border border-border"
+                  onClick={() => setSelectedFile(media)}
+                  className="flex items-center gap-3 p-3 rounded-lg bg-accent border border-border cursor-pointer hover:bg-accent/80 transition-colors"
                   data-testid={`media-item-${media.id}`}
                 >
                   <div className="w-12 h-12 rounded bg-muted flex items-center justify-center flex-shrink-0">

server/services/cloudinary.ts

@@ -59,17 +59,17 @@ class CloudinaryService {
     if (!isVideo) {
       facebookFeedUrl = cloudinary.url(publicId, {
         transformation: [
-          { width: 1200, height: 630, crop: 'fill', gravity: 'auto' }
+          { width: 1200, height: 630, crop: 'pad', gravity: 'auto', background: 'black' }
         ]
       });
       instagramFeedUrl = cloudinary.url(publicId, {
         transformation: [
-          { width: 1080, height: 1080, crop: 'fill', gravity: 'auto' }
+          { width: 1080, height: 1080, crop: 'pad', gravity: 'auto', background: 'black' }
         ]
       });
       instagramStoryUrl = cloudinary.url(publicId, {
         transformation: [
-          { width: 1080, height: 1920, crop: 'fill', gravity: 'auto' }
+          { width: 1080, height: 1920, crop: 'pad', gravity: 'auto', background: 'black' }
         ]
       });
     }