Hide background in bottom nav bar

Author: MartinBraquet

web/components/home/home.tsx

@@ -51,7 +51,7 @@ export function LoggedOutHome() {
     <>
       {user === null && <Col className="mb-4 gap-2 lg:hidden">
           <SignUpButton
-              className="mt-4 flex-1 fixed bottom-[55px] w-full left-0 right-0 z-10 mx-auto px-4"
+              className="mt-4 flex-1 fixed bottom-[calc(55px+env(safe-area-inset-bottom))] w-full left-0 right-0 z-10 mx-auto px-4"
               size="xl"
               text="Sign up"
           />

web/components/nav/bottom-nav-bar.tsx

@@ -37,7 +37,7 @@ export function BottomNavBar(props: {
     return null
   }
 
-  return (
+  return (<Col>
     <nav
       className={clsx(
         "border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-50 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav",
@@ -69,6 +69,15 @@ export function BottomNavBar(props: {
         sidebarNavigationOptions={sidebarNavigationOptions}
       />
     </nav>
+
+      <div
+        className="fixed inset-x-0 bg-canvas-50"
+        style={{
+          bottom: 0,
+          height: 'env(safe-area-inset-bottom)',
+        }}
+      />
+    </Col>
   )
 }
 

web/styles/globals.css

@@ -458,6 +458,6 @@ ol > li::marker {
 
 .safe-bottom {
     /*bottom: env(safe-area-inset-bottom);*/
-    bottom: calc(env(safe-area-inset-bottom) + 0px);
+    bottom: calc(env(safe-area-inset-bottom));
 }