From 7de6d899f11506709e373fd835b7f0ed2020d7be Mon Sep 17 00:00:00 2001
From: kibin <juankibin@gmail.com>
Date: Wed, 1 Apr 2026 07:44:53 +0000
Subject: [PATCH] fix(254): modal scrollable with sticky footer

---
 src/components/ui/Modal.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 7713723..1ce1456 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -9,10 +9,11 @@ interface ModalProps {
   onClose: () => void;
   title: string;
   children: React.ReactNode;
+  footer?: React.ReactNode;
   className?: string;
 }
 
-export function Modal({ isOpen, onClose, title, children, className }: ModalProps) {
+export function Modal({ isOpen, onClose, title, children, footer, className }: ModalProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -31,8 +32,8 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
       onClick={(e) => e.target === overlayRef.current && onClose()}
     >
-      <div className={cn("w-full max-w-lg rounded-xl bg-white shadow-xl", className)}>
-        <div className="flex items-center justify-between border-b border-gray-100 px-6 py-4">
+      <div className={cn("w-full max-w-lg rounded-xl bg-white shadow-xl flex flex-col max-h-[90vh]", className)}>
+        <div className="flex items-center justify-between border-b border-gray-100 px-6 py-4 flex-shrink-0">
           <h3 className="text-base font-semibold text-gray-900">{title}</h3>
           <button
             onClick={onClose}
@@ -41,7 +42,12 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
             <X className="h-5 w-5" />
           </button>
         </div>
-        <div className="px-6 py-4">{children}</div>
+        <div className="px-6 py-4 overflow-y-auto flex-1">{children}</div>
+        {footer && (
+          <div className="flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3 flex-shrink-0">
+            {footer}
+          </div>
+        )}
       </div>
     </div>
   );