diff --git a/app/globals.css b/app/globals.css index 8fe7cb8bf..31dc8791b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -161,9 +161,16 @@ mark { padding-top: calc(56px + var(--top-bar-height)) !important; } - /* Reserve space for the fixed MobileBottomNav (h-16 + safe-area inset) plus - the funding power bar docked above it (3.75rem including its gutter). */ + /* Reserve space for the fixed MobileBottomNav (h-16 + safe-area inset), so + the last of the page's content isn't stuck behind it. */ .page-layout-with-mobile-bottom-nav { + padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); + } + + /* As above, plus the funding power bar docked over the nav on the home tabs + (3.75rem including its gutter). Pages without that bar use the shorter + offset, or the unused space reads as a dead gap under the content. */ + .page-layout-with-mobile-bottom-nav-and-funding-bar { padding-bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px)); } } diff --git a/app/layouts/MobileBottomNav.tsx b/app/layouts/MobileBottomNav.tsx index 5cc23ab25..547e42150 100644 --- a/app/layouts/MobileBottomNav.tsx +++ b/app/layouts/MobileBottomNav.tsx @@ -230,19 +230,25 @@ export const MobileBottomNav: React.FC = () => { {/* Docked over the content directly above the nav, sharing its scroll fade so the two read as one piece of chrome. The nav is z-[100]. + Only the home tabs get it: elsewhere it covers page content that has + nothing to do with funding power, and PageLayout stops reserving room + for it. Keep this condition in sync with the padding class there. + The wrapper spans the full width but only the bar inside it is drawn, so it stays `pointer-events-none` and FundingPowerBar re-enables hits on the bar itself. A fixed element swallows touch drags that start on it — they scroll the document, not the feed's scrollport — so every pixel of it that isn't a control is a band the feed can't be scrolled from, and `opacity-20` makes those bands invisible rather than absent. */} -
- -
+ {isHomeTabPath(pathname) && ( +
+ +
+ )} {/* Bottom Navigation Bar */}