feat(FN-4574): complete Step 4 — update mobile board README behavior

Fusion-Task-Id: FN-4574
Fusion-Task-Lineage: 6092cde6-b60b-4f7b-ac46-ceb730970eb2
This commit is contained in:
Fusion
2026-05-15 01:09:52 -07:00
committed by gsxdsm
parent dfe1120262
commit f41713065d

View File

@@ -208,8 +208,9 @@ The dashboard stylesheet defines a shared mobile foundation in `app/styles.css`
### Mobile Board View
At the mobile breakpoint (`@media (max-width: 768px)`), the board and card surfaces switch to a touch-first layout:
- **Horizontal board navigation:** `.board` uses horizontal scroll with `scroll-snap-type: x mandatory`, smooth scrolling, and hidden scrollbars so users can swipe cleanly between columns.
- **Column sizing and centering:** each board column is fixed to `280px` (`width` + `min-width`) with `scroll-snap-align: center`, so one column is centered at a time during horizontal navigation.
- **Horizontal board navigation:** `.board` uses horizontal scroll with `scroll-snap-type: x proximity`, smooth scrolling, and hidden scrollbars so users can swipe cleanly between columns.
- **iOS restore stabilization:** Board also performs mount-time reflow/scroll normalization and `pageshow` re-anchoring on mobile to avoid stale-layout corner rendering on iOS Safari (FN-001 baseline + FN-4574 lifecycle fix).
- **Column sizing and centering:** each board column is fixed to `300px` (`width` + `min-width`) with `scroll-snap-align: center`, so one column is centered at a time during horizontal navigation.
- **Compact card layout:** task cards use tighter spacing for badges/progress metadata on narrow columns, and mobile action controls (edit/archive/unarchive) remain visible without hover.
- **Touch interaction model:** quick taps on cards open task details, while horizontal/vertical movement beyond the touch threshold is treated as scroll/gesture input (so swiping between columns does not accidentally open a card).
- **Touch target convention:** interactive card controls (edit button, archive/unarchive actions, steps toggle, session-files button) follow a minimum `44px` touch target on mobile.