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

fix(dashboard): extend mobile nav bar surface into iOS safe area

Browse Source 
Icons in the installed PWA were overlapped by the iOS home indicator and a
body-colored gap appeared between the nav bar and the executor status bar
(whose `bottom` already includes safe-area-inset-bottom + standalone-bottom-gap).
Adding matching `padding-bottom` to `.mobile-nav-bar` lifts icons above the
indicator and closes the gap.

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

5
.changeset/dashboard-pwa-nav-bar-safe-area.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Fix mobile bottom nav bar overlapping the iOS home indicator in installed PWAs and the visible gap between the nav bar and the executor status bar. The nav bar now extends its surface into the safe-area inset so icons sit above the home indicator and the bar meets the status bar flush.

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

@@ -19,9 +19,10 @@
background: var(--surface);
border-top: 1px solid var(--border);
min-height: var(--mobile-nav-height);
/* No safe-area padding: icons render flush with the screen bottom in PWA;
the iOS home indicator floats over the bar. Same convention as Instagram/X. */
padding-bottom: 0;
/* 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));
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}