Update layouts/MainLayout.js

layouts/MainLayout.js

@@ -6,28 +6,31 @@ export default function MainLayout({ children }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
-    <div className="min-h-screen bg-[#F8FAFC] relative overflow-hidden">
+    <div className="min-h-screen relative overflow-hidden">
       
-      {/* 1. Android Menu Button (Top Left) */}
-      <div className="fixed top-6 left-6 z-40 pt-safe-top">
+      {/* 1. MENU BUTTON: Pinned Top-Left (Outside everything) */}
+      <div className="fixed top-6 left-6 z-50">
         <button 
           onClick={() => setIsMenuOpen(true)}
           className="active:scale-90 transition-transform"
         >
+          {/* Sized correctly (w-12) so it's not giant */}
           <img 
             src="/assets/menu_button.png" 
             alt="Menu" 
-            className="w-10 h-auto drop-shadow-md" 
+            className="w-12 h-auto drop-shadow-md" 
           />
         </button>
       </div>
 
       <GlassDrawer isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
       
-      <main className="relative z-0 h-screen w-full">
+      {/* 2. MAIN CONTENT (The Feed) */}
+      <main className="relative z-0 w-full h-screen">
         {children}
       </main>
 
+      {/* 3. DOCK (Bottom Icons) */}
       <GlassDock />
     </div>
   );