fix(dashboard): keep mobile nav bar pinned when iOS keyboard opens

The visualViewport ICB compensation (intended for Android ICB-stuck-large
and pinch-zoom) was also reacting to iOS soft-keyboard shrinkage, pushing
the mobile bottom nav up above the keyboard. Pass the existing
`keyboardOpen` prop through to a `mobile-nav-bar--keyboard-open` modifier
class that pins `bottom: 0` so the keyboard simply covers the bar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-23 02:50:37 -07:00
parent 57f33ea2d2
commit a7ad30f22a
3 changed files with 15 additions and 2 deletions

View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Mobile (iOS): the bottom navigation bar no longer slides up when the on-screen keyboard appears. The viewport-compensation offset that pulls fixed elements back into the visible area (intended for Android ICB quirks / pinch-zoom) was also being driven by the keyboard's shrunken `visualViewport.height` on iOS, pushing the nav bar above the keyboard. The nav now ignores that offset while `keyboardOpen` is true and stays pinned at the page bottom — the keyboard simply covers it.

View File

@@ -44,6 +44,14 @@
bottom: var(--icb-bottom-offset, 0px);
}
/* When the on-screen keyboard is open, ignore the visualViewport
compensation that would otherwise push the bar up by the keyboard
height (iOS shrinks vv.height; bottomOffset becomes ~keyboard height).
Pin the nav to the page bottom so the keyboard simply covers it. */
.mobile-nav-bar--keyboard-open {
bottom: 0;
}
/* 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) + max(env(safe-area-inset-bottom, 0px), 12px) + var(--standalone-bottom-gap));

View File

@@ -116,7 +116,7 @@ export function MobileNavBar({
onChangeView,
footerVisible,
modalOpen = false,
keyboardOpen: _keyboardOpen = false,
keyboardOpen = false,
onOpenSettings,
onOpenActivityLog,
onOpenSystemStats,
@@ -281,7 +281,7 @@ export function MobileNavBar({
<>
<nav
ref={navRef}
className={`mobile-nav-bar${footerVisible ? " mobile-nav-bar--with-footer" : ""}`}
className={`mobile-nav-bar${footerVisible ? " mobile-nav-bar--with-footer" : ""}${keyboardOpen ? " mobile-nav-bar--keyboard-open" : ""}`}
role="tablist"
aria-label="Primary navigation"
>