root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): floor mobile nav inset so Android Chrome gesture bar can't overlap

Browse Source 
Android Chrome under viewport-fit=cover intermittently reports
env(safe-area-inset-bottom) as 0 while the address bar is visible or
during URL-bar collapse, causing the bottom nav to render beneath the
system gesture pill. Floor the inset to 12px in MobileNavBar's own
padding and the matching content-padding rules so the bar always clears
the gesture area; devices that report a larger inset are unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-22 20:48:09 -07:00
parent e291d86444
commit ba9d6326e4
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fix-android-nav-gesture-overlap.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Mobile bottom nav no longer occasionally hides behind Android Chrome's gesture pill. Chrome under `viewport-fit=cover` intermittently reports `env(safe-area-inset-bottom)` as `0` while the address bar is visible or during URL-bar collapse; the nav now floors that inset to 12px so it always clears the gesture area. Devices that report a larger inset are unaffected.

10
packages/dashboard/app/components/MobileNavBar.css
View File

@@ -27,7 +27,11 @@
/* Extend the bar's surface into the iOS home-indicator area so icons sit above
the indicator (PWA standalone) and the bar meets the executor status bar
flush — its `bottom` already adds these same terms. */
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
/* Floor the inset to ~12px so the bar clears Android Chrome's gesture pill
even when the browser under-reports safe-area-inset-bottom (happens while
the address bar is visible / during URL-bar collapse). Devices that
correctly report a larger inset are unaffected. */
padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 12px) + var(--standalone-bottom-gap));
box-shadow: var(--shadow-md);
}
@@ -42,13 +46,13 @@
/* Content padding: mobile nav only (no footer). Bar is flush at bottom (no safe-area pad). */
.project-content--with-mobile-nav:not(.project-content--with-footer) {
padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap));
padding-bottom: calc(var(--mobile-nav-height) + max(env(safe-area-inset-bottom, 0px), 12px) + var(--standalone-bottom-gap));
}
/* Content padding: both mobile nav AND footer */
.project-content--with-footer.project-content--with-mobile-nav {
padding-bottom: calc(
var(--executor-footer-height) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap)
var(--executor-footer-height) + var(--mobile-nav-height) + max(env(safe-area-inset-bottom, 0px), 12px) + var(--standalone-bottom-gap)
);
}
}