jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Merge pull request 'feat(booking-ui): enhance mobile booking dialog styling and layout' (#11) from codex/fix-mobile-booking-dlg into development

Browse Source 
Reviewed-on: #11
This commit is contained in:
jselesan
2026-06-05 17:37:52 +00:00
parent af687fe2d8 4b1b06f00f
commit 2ccff7dcaa
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/frontend/src/features/booking/components/booking-create-dialog.tsx
View File

@@ -166,17 +166,21 @@ export function BookingCreateDialog() {
onOpenChange={(open) => !open && closeCreateBooking()} onOpenChange={(open) => !open && closeCreateBooking()}
> >
<ResponsiveDialogContent <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()} 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> <ResponsiveDialogTitle>Nueva reserva</ResponsiveDialogTitle>
<ResponsiveDialogDescription> <ResponsiveDialogDescription>
Crea un turno para atención telefónica o mostrador. Crea un turno para atención telefónica o mostrador.
</ResponsiveDialogDescription> </ResponsiveDialogDescription>
</ResponsiveDialogHeader> </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"> <div className="grid gap-3 md:grid-cols-2">
<Field> <Field>
<FieldLabel>Fecha</FieldLabel> <FieldLabel>Fecha</FieldLabel>
@@ -294,7 +298,7 @@ export function BookingCreateDialog() {
{createBookingError && <p className="text-sm text-destructive">{createBookingError}</p>} {createBookingError && <p className="text-sm text-destructive">{createBookingError}</p>}
</form> </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> <ResponsiveDialogClose asChild>
<Button variant="outline">Cancelar</Button> <Button variant="outline">Cancelar</Button>
</ResponsiveDialogClose> </ResponsiveDialogClose>