From 7f26bebc8dd98fba495f0b278caf811ed712d936 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Tue, 3 Mar 2026 01:17:03 -0600
Subject: [PATCH] fix(fab): use fixed positioning so FAB hovers above nav bar
 regardless of scroll

---
 src/components/MainLayout.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx
index 3bba1595..c95c1247 100644
--- a/src/components/MainLayout.tsx
+++ b/src/components/MainLayout.tsx
@@ -88,24 +88,28 @@ function MainLayoutInner() {
 
         {/* Main content + right sidebar: inside Suspense so the left sidebar persists while lazy pages load */}
         <Suspense fallback={<PageSkeleton />}>
-          {/* Wrap the center column in a relative container for the FAB */}
           <div className={cn("relative flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-l border-r border-border bg-background/85")}>
             <Outlet />
-            {showFAB && (
-              <div className={cn(
-                'sticky bottom-fab sidebar:bottom-6 z-30 pointer-events-none flex justify-end pr-6 transition-all duration-300',
-                fabHidden ? 'opacity-0 translate-y-4' : 'opacity-100 translate-y-0',
-              )}>
-                <div className={cn('pointer-events-auto', fabHidden && 'pointer-events-none')}>
-                  <FloatingComposeButton kind={fabKind} href={fabHref} onFabClick={onFabClick} />
-                </div>
-              </div>
-            )}
           </div>
           {rightSidebar ?? <RightSidebar />}
         </Suspense>
       </div>
 
+      {/* FAB — fixed above the mobile nav bar, centered on the content column */}
+      {showFAB && (
+        <div className={cn(
+          'fixed bottom-fab sidebar:bottom-6 inset-x-0 z-30 pointer-events-none flex justify-center transition-all duration-300',
+          fabHidden ? 'opacity-0 translate-y-4' : 'opacity-100 translate-y-0',
+        )}>
+          {/* Constrain to center column width so it aligns with content */}
+          <div className="w-full max-w-[600px] flex justify-end pr-6 pointer-events-none">
+            <div className={cn('pointer-events-auto', fabHidden && 'pointer-events-none')}>
+              <FloatingComposeButton kind={fabKind} href={fabHref} onFabClick={onFabClick} />
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Mobile bottom nav - only on small screens */}
       <MobileBottomNav />