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

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);
}