Add safe area support for devices with rounded corners and home indicators

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`}
       >

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} />
 

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" />
     </>
   );
 }