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:
5
.changeset/fix-mobile-nav-keyboard-shift.md
Normal file
5
.changeset/fix-mobile-nav-keyboard-shift.md
Normal 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.
|
||||
@@ -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));
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user