From f5673c8ef5f5dd99cb1ed2661fabd96a5f2dab9a Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Tue, 28 Oct 2025 16:09:13 +0000
Subject: [PATCH] Improve time selection layout for better user experience

Adjusts the width of scrollable areas within the DateTimePicker component, specifically for hours and minutes, to ensure proper alignment and visibility on various screen sizes.

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/sCmMzVy
---
 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 67e5072..165c055 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-auto max-w-[280px] p-0" align="start">
+          <PopoverContent className="w-[200px] p-0" align="start">
             <div className="flex">
-              <ScrollArea className="h-48">
+              <ScrollArea className="h-48 w-24">
                 <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 border-l">
+              <ScrollArea className="h-48 w-20 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) => (