FN-5702: keep mobile footer and nav pinned when keyboard opens

Add viewport-offset handling so mobile bottom bars stay anchored while virtual keyboards resize the visual viewport.

- add a shared viewportOffset utility to compute keyboard-related visual viewport compensation
- update dashboard app bootstrap/index logic to apply compensation variables for pinned footer/nav layout
- extend mobile keyboard layout coverage with dedicated viewport compensation and bottom-bar tests
- document the keyboard/pinned-bar behavior update in dashboard guide

Files changed:
 docs/dashboard-guide.md                            |  2 +-
 .../mobile-bottom-bars-keyboard-layout.test.ts     | 12 ++-
 .../viewport-compensation-keyboard.test.ts         | 24 ++++++
 packages/dashboard/app/index.html                  | 39 +++++++++-
 .../app/utils/__tests__/viewportOffset.test.ts     | 86 ++++++++++++++++++++++
 packages/dashboard/app/utils/viewportOffset.ts     | 64 ++++++++++++++++
 6 files changed, 223 insertions(+), 4 deletions(-)

Fusion-Task-Id: FN-5702

Fusion-Task-Lineage: be47ad0c-82df-4c38-9577-94c2eee49a0e
This commit is contained in:
gsxdsm
2026-05-29 19:06:36 -07:00
parent ff575f8b06
commit 129e17d16c
6 changed files with 223 additions and 4 deletions

View File

@@ -1025,7 +1025,7 @@ Don't create parallel button/form variants — add states (`:hover`, `:focus-vis
Breakpoints: 768px (primary mobile), 1024px (tablet `min-width: 769px and max-width: 1024px`), 640px (compact), 480px (xs). Mobile overrides go in `@media (max-width: 768px)` blocks at the bottom of `styles.css` after base styles.
**Bottom spacing:** `--mobile-nav-height` (44px) + `env(safe-area-inset-bottom, 0px)` + `--standalone-bottom-gap` (0/8px PWA). All bottom-positioned mobile elements compose those.
**Bottom spacing:** `--mobile-nav-height` (44px) + `env(safe-area-inset-bottom, 0px)` + `--standalone-bottom-gap` (0/8px PWA). All bottom-positioned mobile elements compose those. When the soft keyboard opens, the mobile nav bar and executor footer stay pinned to page bottom and are covered by the keyboard (they do not shift upward).
**Touch targets:** Standing button-freeze directive supersedes per-button touch-target guidance. For non-button elements, primary controls (nav bar, FAB, tab action rows, modal CTAs, list-row tap targets, form controls) must be ≥36px on mobile. Secondary controls inside a card/list-row where the row itself is the tap target stay compact (2428px or small chips).