From 688cc4235841c61c63bd412dd852e5099a655900 Mon Sep 17 00:00:00 2001
From: Devin Wilson <devwilson@ucdavis.edu>
Date: Mon, 18 May 2026 20:36:31 -0700
Subject: [PATCH] fix(ui): modal bottom clipping/overflow on finance modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modal surface filled the viewport (inset-0 / h-full) while also applying
paddingTop: env(safe-area-inset-top) on the same flex container. With
content-box sizing the safe-area padding inflated the box past the
viewport, pushing the flex-shrink-0 footer below the visible bottom
edge where it was clipped (no bottom padding / rounded-corner spacing).

Fix: add box-border so safe-area padding is absorbed within the height
instead of overflowing, and clamp the mobile surface to the dynamic
viewport (max-h-[100dvh]) so the footer always renders inside the
rounded panel with comfortable spacing. Layout/overflow only — no
behavior, field, or action changes.
---
 web/src/components/common/Modal.tsx            | 4 ++--
 web/src/components/finance/AddIncomeModal.tsx  | 4 ++--
 web/src/components/finance/NewInvoiceModal.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/common/Modal.tsx b/web/src/components/common/Modal.tsx
index d29d63c..50f496e 100644
--- a/web/src/components/common/Modal.tsx
+++ b/web/src/components/common/Modal.tsx
@@ -114,8 +114,8 @@ export function Modal({
         ref={contentRef}
         tabIndex={-1}
         className={cn(
-          'relative z-10 flex flex-col bg-[var(--bg-card)] outline-none overflow-hidden',
-          'w-full h-full md:h-auto md:max-h-[88vh]',
+          'relative z-10 flex flex-col bg-[var(--bg-card)] outline-none overflow-hidden box-border',
+          'w-full h-[100dvh] max-h-[100dvh] md:h-auto md:max-h-[88vh]',
           'md:w-full md:rounded-2xl md:border md:border-[var(--border)]',
           'md:shadow-[0_24px_60px_-12px_rgba(0,0,0,0.45)]',
           'animate-fade-in-up md:animate-scale-in',
diff --git a/web/src/components/finance/AddIncomeModal.tsx b/web/src/components/finance/AddIncomeModal.tsx
index cf06ef7..33e22ce 100644
--- a/web/src/components/finance/AddIncomeModal.tsx
+++ b/web/src/components/finance/AddIncomeModal.tsx
@@ -75,8 +75,8 @@ export function AddIncomeModal({ onClose, onAdded }: AddIncomeModalProps) {
         aria-modal="true"
         aria-label="Add income"
         className={cn(
-          'fixed z-[60] flex flex-col bg-[var(--bg-page)]',
-          'inset-0',
+          'fixed z-[60] flex flex-col bg-[var(--bg-page)] box-border overflow-hidden',
+          'inset-0 max-h-[100dvh]',
           'md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2',
           'md:w-full md:max-w-md md:max-h-[85vh] md:rounded-2xl md:border md:border-[var(--border)] md:shadow-2xl',
           'animate-fade-in-up md:animate-scale-in'
diff --git a/web/src/components/finance/NewInvoiceModal.tsx b/web/src/components/finance/NewInvoiceModal.tsx
index 75e81de..1b8c77e 100644
--- a/web/src/components/finance/NewInvoiceModal.tsx
+++ b/web/src/components/finance/NewInvoiceModal.tsx
@@ -177,9 +177,9 @@ export function NewInvoiceModal({ clients, workItems, settings, hourlyRate, paym
       {/* Modal — full page on mobile, centered card on desktop */}
       <div
         className={cn(
-          'fixed z-[60] flex flex-col bg-[var(--bg-page)]',
+          'fixed z-[60] flex flex-col bg-[var(--bg-page)] box-border overflow-hidden',
           // Mobile: full page
-          'inset-0',
+          'inset-0 max-h-[100dvh]',
           // Desktop: centered card
           'md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2',
           'md:w-full md:max-w-lg md:max-h-[85vh] md:rounded-2xl md:border md:border-[var(--border)] md:shadow-2xl',