From 47bc5f516f048d32b98ff7d9ea8f46cbdfbe474e Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Mon, 23 Mar 2026 23:20:59 -0500
Subject: [PATCH] Fix bottom nav arc on safe-area devices: separate safe area
 spacer from arc container

---
 src/components/MobileBottomNav.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx
index 40540b41..6a2ce739 100644
--- a/src/components/MobileBottomNav.tsx
+++ b/src/components/MobileBottomNav.tsx
@@ -45,14 +45,16 @@ export function MobileBottomNav() {
 
       <nav
         className={cn(
-          'fixed bottom-0 left-0 right-0 z-40 sidebar:hidden safe-area-bottom will-change-transform',
+          'fixed bottom-0 left-0 right-0 z-40 sidebar:hidden will-change-transform',
           'transition-transform duration-300 ease-in-out',
         )}
         style={isHidden ? hiddenStyle : undefined}
       >
-        <ArcBackground variant={noArcs ? 'rect' : 'up'} />
-
-        <div className="h-11 flex items-center relative">
+        {/* Arc + items wrapper — safe area padding is separate below so the
+            arc's percentage height is based only on the items area. */}
+        <div className="relative">
+          <ArcBackground variant={noArcs ? 'rect' : 'up'} />
+          <div className="h-11 flex items-center relative">
 
           {/* Feed */}
           <Link
@@ -127,7 +129,10 @@ export function MobileBottomNav() {
             </Link>
           )}
 
+          </div>
         </div>
+        {/* Safe area spacer — sits below the arc/items so it doesn't inflate the arc height */}
+        <div className="safe-area-bottom bg-background/95" />
       </nav>
     </>
   );