Fix time selection display on mobile for new posts

Adjust PopoverContent and ScrollArea styling in DateTimePicker.tsx to ensure hours and minutes are visible on mobile view.

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/cOs6ffF

client/src/components/datetime-picker.tsx

@@ -135,9 +135,9 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
               {String(selectedHour).padStart(2, '0')}:{String(selectedMinute).padStart(2, '0')}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-[200px] p-0" align="start">
+          <PopoverContent className="w-auto min-w-[200px] max-w-[280px] p-0" align="center">
             <div className="flex">
-              <ScrollArea className="h-48 w-24">
+              <ScrollArea className="h-48 min-w-[96px] flex-1">
                 <div className="p-1.5">
                   <div className="text-[10px] font-semibold mb-1.5 px-1.5 text-muted-foreground">Heures</div>
                   {hours.map((hour) => (
@@ -160,7 +160,7 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
                   ))}
                 </div>
               </ScrollArea>
-              <ScrollArea className="h-48 w-20 border-l">
+              <ScrollArea className="h-48 min-w-[80px] flex-1 border-l">
                 <div className="p-1.5">
                   <div className="text-[10px] font-semibold mb-1.5 px-1.5 text-muted-foreground">Minutes</div>
                   {minutes.map((minute) => (