From 34549fc4b6991fe2bf87a830cde9cf07c262fe2f Mon Sep 17 00:00:00 2001
From: kibin <juankibin@gmail.com>
Date: Wed, 1 Apr 2026 07:53:26 +0000
Subject: [PATCH] fix(254): invoice modal scrollable with sticky footer buttons
 (#25)

---
 app/(app)/invoices/page.tsx | 22 ++++++++++++++--------
 src/components/ui/Modal.tsx | 14 ++++++++++----
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/app/(app)/invoices/page.tsx b/app/(app)/invoices/page.tsx
index 77cc8b6..6be0257 100644
--- a/app/(app)/invoices/page.tsx
+++ b/app/(app)/invoices/page.tsx
@@ -154,7 +154,20 @@ export default function InvoicesPage() {
       </Card>
 
       {/* Invoice Detail Modal */}
-      <Modal isOpen={!!selected} onClose={() => setSelected(null)} title={`Invoice ${selected?.invoiceNumber ?? ""}`} className="max-w-lg">
+      <Modal
+        isOpen={!!selected}
+        onClose={() => setSelected(null)}
+        title={`Invoice ${selected?.invoiceNumber ?? ""}`}
+        className="max-w-lg"
+        footer={selected ? (
+          <>
+            {selected.status !== "VOID" && selected.status !== "PAID" && (
+              <Button variant="danger" size="sm" onClick={() => voidInvoice.mutate(selected.id)} isLoading={voidInvoice.isPending}>Void Invoice</Button>
+            )}
+            <Button variant="outline" size="sm" onClick={() => setSelected(null)}>Close</Button>
+          </>
+        ) : undefined}
+      >
         {selected && (
           <div className="space-y-4">
             <div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
@@ -196,13 +209,6 @@ export default function InvoicesPage() {
                   disabled={!payForm.amount}>Record Payment</Button>
               </div>
             )}
-
-            <div className="flex justify-between pt-1">
-              {selected.status !== "VOID" && selected.status !== "PAID" && (
-                <Button variant="danger" size="sm" onClick={() => voidInvoice.mutate(selected.id)} isLoading={voidInvoice.isPending}>Void Invoice</Button>
-              )}
-              <Button variant="outline" size="sm" onClick={() => setSelected(null)} className="ml-auto">Close</Button>
-            </div>
           </div>
         )}
       </Modal>
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>
   );