From 52c0d46f87342bf5736b50973b90c3e1ee57deeb Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 29 Oct 2025 06:47:59 +0000
Subject: [PATCH] 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 | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/components/datetime-picker.tsx b/client/src/components/datetime-picker.tsx
index a16b100..4e5d66a 100644
--- a/client/src/components/datetime-picker.tsx
+++ b/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">