From d6f4576105d7032f687ecae931ad15f3cafb320b Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Fri, 16 Jan 2026 11:14:29 -0500
Subject: [PATCH] Fix safe area insets for iPhone using CSS custom properties

---
 src/app/globals.css          | 1 +
 src/app/page.tsx             | 2 +-
 src/components/BottomNav.tsx | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 72dcc6c..69cb15e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,7 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 @theme inline {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 03c1e07..846f44d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -219,7 +219,7 @@ export default function Home() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pb-24 md:pb-0" style={{ paddingBottom: 'calc(6rem + env(safe-area-inset-bottom))' }}>
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 md:pb-0" style={{ paddingBottom: 'calc(6rem + var(--safe-area-inset-bottom))' }}>
       <ReminderBanner userEmail={user.email || undefined} />
       <BottomNav activeTab={activeTab} onTabChange={setActiveTab} />
 
diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
index 29fbc0e..32b60e2 100644
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -24,7 +24,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
   return (
     <>
       {/* Mobile Bottom Navigation */}
-      <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 md:hidden z-50" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
+      <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 md:hidden z-50" style={{ paddingBottom: 'var(--safe-area-inset-bottom)' }}>
         <div className="flex justify-around">
           {navItems.map(item => (
             <button