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

@@ -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">