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',