From 89454c3cc4758be3924255433770d4e1647dd576 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Mon, 31 Aug 2026 15:26:02 +0700
Subject: [PATCH] feat: enhance FormDialog component with improved layout and
 utility class integration

---
 resources/js/components/form-dialog.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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