From 61ecd7679aa35b46ea69bc835a1598493ff3bcca Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Fri, 16 Jan 2026 11:09:15 -0500
Subject: [PATCH] Add safe area support for devices with rounded corners and
 home indicators

---
 src/app/layout.tsx           | 4 +++-
 src/app/page.tsx             | 2 +-
 src/components/BottomNav.tsx | 5 +----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c4b4575..57733c9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -49,7 +49,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark" suppressHydrationWarning={true}>
-      <head></head>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 04bb8e4..03c1e07 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">
+    <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))' }}>
       <ReminderBanner userEmail={user.email || undefined} />
       <BottomNav activeTab={activeTab} onTabChange={setActiveTab} />
 
diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
index 31cfb98..29fbc0e 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">
+      <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)' }}>
         <div className="flex justify-around">
           {navItems.map(item => (
             <button
@@ -71,9 +71,6 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
           Logout
         </button>
       </nav>
-
-      {/* Mobile padding for bottom nav */}
-      <div className="h-20 md:h-0" />
     </>
   );
 }