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);
|
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). */
|
/* 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) {
|
.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));
|
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,
|
onChangeView,
|
||||||
footerVisible,
|
footerVisible,
|
||||||
modalOpen = false,
|
modalOpen = false,
|
||||||
keyboardOpen: _keyboardOpen = false,
|
keyboardOpen = false,
|
||||||
onOpenSettings,
|
onOpenSettings,
|
||||||
onOpenActivityLog,
|
onOpenActivityLog,
|
||||||
onOpenSystemStats,
|
onOpenSystemStats,
|
||||||
@@ -281,7 +281,7 @@ export function MobileNavBar({
|
|||||||
<>
|
<>
|
||||||
<nav
|
<nav
|
||||||
ref={navRef}
|
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"
|
role="tablist"
|
||||||
aria-label="Primary navigation"
|
aria-label="Primary navigation"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user