diff --git a/app/src/components/BottomTabBar.tsx b/app/src/components/BottomTabBar.tsx
index 97d16d6f2..a0706a11b 100644
--- a/app/src/components/BottomTabBar.tsx
+++ b/app/src/components/BottomTabBar.tsx
@@ -180,7 +180,10 @@ const BottomTabBar = () => {
   };
 
   return (
-    <div className="absolute inset-x-0 bottom-0 z-50">
+    // pointer-events-none on the full-width shell so transparent areas (e.g.
+    // beside the centered nav pill) do not steal clicks from sticky footers
+    // such as Settings SaveBar. Only the <nav> pill re-enables hits.
+    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-50">
       {/* Hover strip — only matters when collapsed; provides a 12px bottom
           edge the user can mouse into to reveal the bar again. */}
       {collapsed && (
diff --git a/app/src/components/__tests__/BottomTabBar.test.tsx b/app/src/components/__tests__/BottomTabBar.test.tsx
index 0775aa126..773882c9d 100644
--- a/app/src/components/__tests__/BottomTabBar.test.tsx
+++ b/app/src/components/__tests__/BottomTabBar.test.tsx
@@ -138,4 +138,11 @@ describe('BottomTabBar', () => {
     const { container } = await renderBottomTabBar('/');
     expect(container.firstChild).toBeNull();
   });
+
+  it('uses pointer-events-none on the full-width shell so side areas do not block clicks', async () => {
+    const { container } = await renderBottomTabBar('/home');
+    const shell = container.firstElementChild;
+    expect(shell).toHaveClass('pointer-events-none');
+    expect(shell?.querySelector('nav')).toHaveClass('pointer-events-auto');
+  });
 });