feat: enhance FormDialog component with improved layout and utility class integration

This commit is contained in:
Yoga Pangestu 2026-08-31 15:26:02 +07:00
parent ddbbf1cc7f
commit 89454c3cc4

View File

@ -9,6 +9,7 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
type FormDialogProps = { type FormDialogProps = {
open: boolean; open: boolean;
@ -44,23 +45,29 @@ export function FormDialog({
}: FormDialogProps) { }: FormDialogProps) {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className={contentClassName}> <DialogContent
className={cn(
'flex max-h-[85vh] flex-col overflow-hidden',
contentClassName,
)}
>
<Form <Form
action={action} action={action}
resetOnSuccess={resetOnSuccess} resetOnSuccess={resetOnSuccess}
onSuccess={onSuccess} onSuccess={onSuccess}
className="flex min-h-0 flex-1 flex-col"
> >
{({ errors, processing }) => ( {({ errors, processing }) => (
<> <>
<DialogHeader> <DialogHeader className="shrink-0">
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4"> <div className="grid flex-1 gap-4 overflow-y-auto py-4">
{typeof children === 'function' {typeof children === 'function'
? children({ errors, processing }) ? children({ errors, processing })
: children} : children}
</div> </div>
<DialogFooter> <DialogFooter className="shrink-0">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"