FN-5931: fix board viewport fill on narrow widths

Keep the board stretched between the header and footer across narrow layouts.

- make .project-content and .board flex-aware with min-size guards so board columns fill the remaining viewport space
- keep the board resize stabilization cleanup defensive when visualViewport lacks removeEventListener
- extend board mobile regression coverage and document footer-safe fill layout guidance

Files changed:
 docs/dashboard-guide.md                            |  2 +
 packages/dashboard/app/components/Board.tsx        |  8 ++-
 packages/dashboard/app/components/ProjectSelector.css   |  2 +
 packages/dashboard/app/components/__tests__/board-mobile-initial-render.test.tsx | 81 ++++++++++++++++++++--
 packages/dashboard/app/styles.css                  |  7 +-
 5 files changed, 89 insertions(+), 11 deletions(-)

Fusion-Task-Id: FN-5931

Fusion-Task-Lineage: 0031ad20-82e5-465d-9326-2b6c2d45de69
This commit is contained in:
gsxdsm
2026-06-02 23:33:11 -07:00
parent 8b450506fc
commit 6d3b1c9810
5 changed files with 89 additions and 11 deletions

View File

@@ -1102,6 +1102,8 @@ Breakpoints: 768px (primary mobile), 1024px (tablet `min-width: 769px and max-wi
**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 stays pinned to page bottom cross-platform; the executor footer keyboard-collapse pin is iOS-only. On Android (`interactive-widget=resizes-content`), the footer keeps its stacked position above the nav bar to avoid overlap after keyboard dismiss.
**Footer-safe fill layouts:** View wrappers that reserve footer/mobile-nav space (for example `.project-content`) should be flex containers with `min-height: 0` / `min-width: 0`, and child surfaces like `.board` should use `flex: 1 1 auto` plus the same min-size guards. This keeps the board/columns stretched between the header and fixed bottom bars across desktop, tablet, and mobile while allowing internal scroll regions to own overflow.
**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).
**Safe area:** `max(var(--space-md), env(safe-area-inset-left, 0px))` for notch-aware horizontal padding.