From e3301765f6c4cf8e0aaeba09e57fce6d29e745bf Mon Sep 17 00:00:00 2001
From: Lemon <lemonknowsall@gmail.com>
Date: Thu, 19 Mar 2026 10:03:30 -0700
Subject: [PATCH] Match bottom nav arc curvature to top header arc

Use same physical deflection (20px) as the top header's decorative arc
so both curves have identical curvature radius.
---
 src/components/MobileBottomNav.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx
index c6cb0a97..5e7ea828 100644
--- a/src/components/MobileBottomNav.tsx
+++ b/src/components/MobileBottomNav.tsx
@@ -45,13 +45,15 @@ export function MobileBottomNav() {
         )}
       >
         {/* Single unified background: arc + rectangle drawn as one SVG shape.
+            Arc uses 12/32 ratio matching the top header arc (viewBox 0 0 100 12, height 20px).
             No separate layers = no opacity overlap seam, no sub-pixel gap. */}
         <svg
-          className="absolute left-0 right-0 bottom-0 w-full h-[calc(100%+20px)] pointer-events-none"
-          viewBox="0 0 100 32"
+          className="absolute left-0 right-0 bottom-0 w-full pointer-events-none"
+          viewBox="0 0 100 64"
           preserveAspectRatio="none"
+          style={{ height: 'calc(100% + 20px)' }}
         >
-          <path d="M0,12 Q50,0 100,12 L100,32 L0,32 Z" className="fill-background/80" />
+          <path d="M0,20 Q50,0 100,20 L100,64 L0,64 Z" className="fill-background/80" />
         </svg>
 
         <div className="h-11 flex items-center relative">