From 4c198e3020dda15095fef7f632b2958eb096c047 Mon Sep 17 00:00:00 2001
From: Arnaud Nelissen <arnaud.nelissen@icloud.com>
Date: Sat, 13 Jun 2026 17:01:58 +0200
Subject: [PATCH] fix(modal): clear bottom nav on mobile, cap max-h to 75vh

pb accounts for 64px tab bar + safe-area-inset-bottom so modal never
slides under the nav. max-h-[75vh] on mobile prevents overflow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/event-modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/event-modal.tsx b/src/components/event-modal.tsx
index 741f81a..b4ad167 100644
--- a/src/components/event-modal.tsx
+++ b/src/components/event-modal.tsx
@@ -338,10 +338,10 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
   const segmentInactive = "border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:border-slate-300";
 
   return (
-    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4">
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 pb-[calc(1rem+env(safe-area-inset-bottom)+64px)] sm:pb-4">
       <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
 
-      <div className="relative w-full max-w-md bg-white dark:bg-slate-800 rounded-2xl shadow-2xl z-10 max-h-[92vh] overflow-y-auto">
+      <div className="relative w-full max-w-md bg-white dark:bg-slate-800 rounded-2xl shadow-2xl z-10 max-h-[75vh] sm:max-h-[92vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-slate-700">
           <div className="flex items-center gap-3">