From 4b1b06f00f3165fb75b9f17dcf9c3c47ba150429 Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Fri, 5 Jun 2026 14:37:27 -0300
Subject: [PATCH] feat(booking-ui): enhance mobile booking dialog styling and
 layout

---
 .../booking/components/booking-create-dialog.tsx     | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/features/booking/components/booking-create-dialog.tsx b/apps/frontend/src/features/booking/components/booking-create-dialog.tsx
index cad41f9..80571e0 100644
--- a/apps/frontend/src/features/booking/components/booking-create-dialog.tsx
+++ b/apps/frontend/src/features/booking/components/booking-create-dialog.tsx
@@ -166,17 +166,21 @@ export function BookingCreateDialog() {
       onOpenChange={(open) => !open && closeCreateBooking()}
     >
       <ResponsiveDialogContent
-        className="data-[variant=dialog]:max-w-lg"
+        className="group/create-booking data-[variant=dialog]:max-w-lg data-[variant=drawer]:!h-[92dvh] data-[variant=drawer]:!max-h-[92dvh] data-[variant=drawer]:overflow-hidden data-[variant=drawer]:px-0 data-[variant=drawer]:pb-0"
         onOpenAutoFocus={(event) => event.preventDefault()}
       >
-        <ResponsiveDialogHeader>
+        <ResponsiveDialogHeader className="group-data-[variant=drawer]/create-booking:shrink-0 group-data-[variant=drawer]/create-booking:px-4 group-data-[variant=drawer]/create-booking:pb-3">
           <ResponsiveDialogTitle>Nueva reserva</ResponsiveDialogTitle>
           <ResponsiveDialogDescription>
             Crea un turno para atención telefónica o mostrador.
           </ResponsiveDialogDescription>
         </ResponsiveDialogHeader>
 
-        <form id="booking-create-form" className="grid gap-4" onSubmit={handleSubmit(onSubmit)}>
+        <form
+          id="booking-create-form"
+          className="grid gap-4 group-data-[variant=drawer]/create-booking:min-h-0 group-data-[variant=drawer]/create-booking:flex-1 group-data-[variant=drawer]/create-booking:overflow-y-auto group-data-[variant=drawer]/create-booking:px-4 group-data-[variant=drawer]/create-booking:pb-4"
+          onSubmit={handleSubmit(onSubmit)}
+        >
           <div className="grid gap-3 md:grid-cols-2">
             <Field>
               <FieldLabel>Fecha</FieldLabel>
@@ -294,7 +298,7 @@ export function BookingCreateDialog() {
           {createBookingError && <p className="text-sm text-destructive">{createBookingError}</p>}
         </form>
 
-        <ResponsiveDialogFooter>
+        <ResponsiveDialogFooter className="group-data-[variant=drawer]/create-booking:shrink-0 group-data-[variant=drawer]/create-booking:border-t group-data-[variant=drawer]/create-booking:border-border/70 group-data-[variant=drawer]/create-booking:bg-popover/95 group-data-[variant=drawer]/create-booking:px-4 group-data-[variant=drawer]/create-booking:pt-3 group-data-[variant=drawer]/create-booking:pb-[calc(12px+env(safe-area-inset-bottom))]">
           <ResponsiveDialogClose asChild>
             <Button variant="outline">Cancelar</Button>
           </ResponsiveDialogClose>
-- 
2.49.1