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:
@@ -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 (24–28px or small chips).
|
||||
|
||||
**Safe area:** `max(var(--space-md), env(safe-area-inset-left, 0px))` for notch-aware horizontal padding.
|
||||
|
||||
Reference in New Issue
Block a user