From 83f3e35443dea556309c709679a7a5e4a9b3c6cc Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 29 Oct 2025 06:39:25 +0000
Subject: [PATCH] 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 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/datetime-picker.tsx b/client/src/components/datetime-picker.tsx
index 165c055..a16b100 100644
--- a/client/src/components/datetime-picker.tsx
+++ b/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) => (