Fix arc bugs: revert top arc to upstream, remove top navbar arc, separate bottom nav overhang for harsher curve

src/components/ArcBackground.tsx

@@ -1,10 +1,13 @@
 import { cn } from '@/lib/utils';
 
-/** The arc overhang in pixels that extends beyond the element's bounds. */
-export const ARC_OVERHANG_PX = 24;
+/** Arc overhang for the downward arc (top bar / sub-header). */
+export const ARC_OVERHANG_PX = 20;
+
+/** Larger overhang for the upward arc (bottom nav) so the harsher curve isn't clipped. */
+export const ARC_UP_OVERHANG_PX = 28;
 
 /** SVG path for a downward arc (used by top bar and sub-header bar). */
-const ARC_DOWN_PATH = 'M0,0 L100,0 L100,24 Q50,64 0,24 Z';
+const ARC_DOWN_PATH = 'M0,0 L100,0 L100,44 Q50,64 0,44 Z';
 
 /** SVG path for an upward arc (used by bottom nav). */
 const ARC_UP_PATH = 'M0,30 Q50,0 100,30 L100,64 L0,64 Z';
@@ -12,8 +15,11 @@ const ARC_UP_PATH = 'M0,30 Q50,0 100,30 L100,64 L0,64 Z';
 /** SVG path for a plain rectangle with no arc. */
 const RECT_PATH = 'M0,0 L100,0 L100,64 L0,64 Z';
 
-/** Pre-computed style for arc variants (avoids creating a new object on every render). */
-const arcHeightStyle: React.CSSProperties = { height: `calc(100% + ${ARC_OVERHANG_PX}px)` };
+/** Pre-computed style for down-arc variant. */
+const arcDownHeightStyle: React.CSSProperties = { height: `calc(100% + ${ARC_OVERHANG_PX}px)` };
+
+/** Pre-computed style for up-arc variant (bottom nav — larger overhang). */
+const arcUpHeightStyle: React.CSSProperties = { height: `calc(100% + ${ARC_UP_OVERHANG_PX}px)` };
 
 /** Pre-computed style for non-arc (rect) variant. */
 const fullHeightStyle: React.CSSProperties = { height: '100%' };
@@ -45,7 +51,7 @@ export function ArcBackground({ variant, className }: ArcBackgroundProps) {
       className={cn(positionClass, 'w-full pointer-events-none', className)}
       viewBox="0 0 100 64"
       preserveAspectRatio="none"
-      style={hasArc ? arcHeightStyle : fullHeightStyle}
+      style={hasArc ? (variant === 'up' ? arcUpHeightStyle : arcDownHeightStyle) : fullHeightStyle}
     >
       <path d={path} className="fill-background/95" />
     </svg>

src/components/MainLayout.tsx

@@ -74,7 +74,7 @@ function MainLayoutInner() {
       {config.magicMouse && <CursorFireEffect />}
 
       {/* Mobile top bar - only on small screens */}
-      <MobileTopBar onAvatarClick={() => setDrawerOpen(true)} showArc={!hasSubHeader && !noArcs} />
+      <MobileTopBar onAvatarClick={() => setDrawerOpen(true)} />
 
       {/* Mobile drawer */}
       <MobileDrawer open={drawerOpen} onOpenChange={setDrawerOpen} />

src/components/MobileBottomNav.tsx

@@ -10,12 +10,12 @@ import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useScrollDirection } from '@/hooks/useScrollDirection';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { useLayoutSnapshot } from '@/contexts/LayoutContext';
-import { ArcBackground, ARC_OVERHANG_PX } from '@/components/ArcBackground';
+import { ArcBackground, ARC_UP_OVERHANG_PX } from '@/components/ArcBackground';
 import { MobileSearchSheet } from '@/components/MobileSearchSheet';
 
 /** Transform style applied when the bottom nav is hidden (scrolled away). */
 const hiddenStyle: React.CSSProperties = {
-  transform: `translateY(calc(100% + ${ARC_OVERHANG_PX}px))`,
+  transform: `translateY(calc(100% + ${ARC_UP_OVERHANG_PX}px))`,
 };
 
 export function MobileBottomNav() {
@@ -52,7 +52,7 @@ export function MobileBottomNav() {
       >
         <ArcBackground variant={noArcs ? 'rect' : 'up'} />
 
-        <div className="h-11 mt-0.5 flex items-center relative">
+        <div className="h-11 flex items-center relative">
 
           {/* Feed */}
           <Link

src/components/MobileTopBar.tsx

@@ -6,11 +6,9 @@ import { ArcBackground } from '@/components/ArcBackground';
 
 interface MobileTopBarProps {
   onAvatarClick: () => void;
-  /** Whether to show the decorative arc below the header (when no sub-header exists). */
-  showArc?: boolean;
 }
 
-export function MobileTopBar({ onAvatarClick, showArc }: MobileTopBarProps) {
+export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
   const location = useLocation();
 
   const handleLogoClick = useCallback((e: React.MouseEvent) => {
@@ -22,7 +20,7 @@ export function MobileTopBar({ onAvatarClick, showArc }: MobileTopBarProps) {
 
   return (
     <header className="sticky top-0 z-20 sidebar:hidden safe-area-top">
-      <ArcBackground variant={showArc ? 'down' : 'rect'} />
+      <ArcBackground variant="rect" />
       <div className="relative flex items-center px-3 h-10">
         {/* Left: hamburger menu icon */}
         <div className="flex items-center justify-center w-7 shrink-0">

src/index.css

@@ -48,9 +48,9 @@
     bottom: calc(1.5rem + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
   }
 
-  /* Position above mobile bottom nav + safe area + arc overhang (24px) */
+  /* Position above mobile bottom nav + safe area + arc overhang (28px) */
   .bottom-mobile-nav {
-    bottom: calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom, 0px));
+    bottom: calc(var(--bottom-nav-height) + 28px + env(safe-area-inset-bottom, 0px));
   }
 
   /* Bottom overscroll padding for the center column: