Shell

components/App.jsx

@@ -0,0 +1,7 @@
+const App = ({ children }) => (
+  <div className="flex h-screen flex-col">
+    {children}
+  </div>
+);
+
+export default App;

components/Content.jsx

@@ -0,0 +1,11 @@
+const Content = ({ className, children }) => (
+  <div
+  className={`${className} flex-1 overflow-auto"`}
+  style={{
+    paddingTop: `calc(env(safe-area-inset-top, 0px) + 16px)`, // Care for the notch
+  }}>
+    {children}
+  </div>
+);
+
+export default Content;

components/Nav.jsx

@@ -6,7 +6,7 @@ const Nav = ({ page }) => {
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
   return (
-    <nav className="bg-gray-800 fixed w-full" id="nav">
+    <nav className="bg-gray-800 w-full flex-0 h-auto">
       <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
         <div className="relative flex items-center justify-between h-16">
           <div

components/TabBar.jsx

@@ -1,9 +1,12 @@
 const TabBar = ({ children }) => (
-  
+  <nav
-  <nav id="tab-bar" className="h-16 bg-white fixed bottom-0 w-full flex justify-center items-center bg-gray-50">
+    id="tab-bar"
+    className="py-2 h-16 bg-white bottom-0 w-full flex justify-center items-start bg-gray-50"
+    style={{
+      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`
+    }}>
     {children}
   </nav>
-  
 )
 
 export default TabBar;

components/pages/Home.jsx

@@ -1,13 +1,14 @@
 import { homeItems } from "../../data";
 import PostCard from "../Card";
+import Content from "../Content";
 
 const Home = () => {
   return (
-    <div class="py-32">
+    <Content>
       {homeItems.map(i => (
         <PostCard {...i} />
       ))}
-    </div>
+    </Content>
   )
 }
 

components/pages/Profile.jsx

@@ -1,10 +1,11 @@
 import { homeItems } from "../../data";
+import Content from "../Content";
 
 const Profile = () => {
   return (
-    <div class="py-32">
+    <Content>
       <h2>Profile</h2>
-    </div>
+    </Content>
   )
 }
 

components/pages/Settings.jsx

@@ -1,8 +1,10 @@
+import Content from "../Content";
+
 const Settings = () => {
   return (
-    <div class="py-32">
+    <Content className="p-4">
       <h2>Settings</h2>
-    </div>
+    </Content>
   )
 }
 

pages/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import Card from '../components/Card';
+import App from '../components/App';
 import Nav from '../components/Nav';
 import Home from '../components/pages/Home';
 import Profile from '../components/pages/Profile';
@@ -23,7 +23,7 @@ export default function Index() {
   const [page, setPage] = useState(pages[0]);
 
   return (
-    <>
+    <App>
       <Nav page={page} />
       <CurrentPage page={page} />
       <TabBar>
@@ -31,6 +31,6 @@ export default function Index() {
           <Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
         ))}
       </TabBar>
-    </>
+    </App>
   );
 }

styles/global.css

@@ -1,10 +1,3 @@
-:root {
+body {
-  /* Safe area contains how much space I should leave from the top and returns 0 if it's not supported */
+  overflow: hidden;
-  --safe-area-inset-top: env(safe-area-inset-top);
-  /* A replacement for 100vh */
-  --screen-height: calc(100vh - var(--safe-area-inset-top));
-}
-
-#nav {
-  padding-top: var(--safe-area-inset-top);
 }