Improve time selection on mobile for new posts

Adjust PopoverContent props in DateTimePicker.tsx for better alignment and collision handling, resolving mobile display issues.

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,7 +135,14 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
               {String(selectedHour).padStart(2, '0')}:{String(selectedMinute).padStart(2, '0')}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-auto min-w-[200px] max-w-[280px] p-0" align="center">
+          <PopoverContent 
+            className="w-auto min-w-[200px] max-w-[280px] p-0" 
+            align="center"
+            side="bottom"
+            sideOffset={8}
+            collisionPadding={16}
+            avoidCollisions={true}
+          >
             <div className="flex">
               <ScrollArea className="h-48 min-w-[96px] flex-1">
                 <div className="p-1.5">