Check iOS notch handling

Verify that the iOS notch handling feature is working correctly.

src/pages/Settings.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import NavBar from '@/components/NavBar';
@@ -8,6 +7,7 @@ import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from '
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/auth';
 import { useToast } from '@/hooks/useToast.wrapper';
+import SafeAreaContainer from '@/components/SafeAreaContainer';
 
 const SettingsOption = ({
   icon: Icon,
@@ -57,7 +57,8 @@ const Settings = () => {
     navigate(path);
   };
   
-  return <div className="min-h-screen bg-neuro-background pb-24">
+  return (
+    <SafeAreaContainer className="min-h-screen bg-neuro-background">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
         <header className="py-4">
@@ -121,7 +122,8 @@ const Settings = () => {
       </div>
 
       <NavBar />
-    </div>;
+    </SafeAreaContainer>
+  );
 };
 
 export default Settings;