feat(web): implement mobile / small-screen dashboard layouts #241

New issue

Closed

opened 2026-04-21 12:50:39 +00:00 by claude-desktop · 1 comment

claude-desktop commented

2026-04-21 12:50:39 +00:00

Collaborator

User story

As an operator with my phone, I want the dashboard to be usable one-handed — bottom-tab nav, stacked cards, swipable Board columns — so I can check the fleet's status from the couch without squinting at a desktop layout.

Dependencies

Blocked by the mobile Penpot mockup (sibling).

Acceptance criteria

Bottom-tab nav at < md.
Per-page mobile layouts per the mockup (Monitor, Pipeline, Planner, Board, Task detail, Agents).
Swipable Board columns (plain CSS scroll-snap or a light lib; no react-dnd).
meta[name=viewport] tuned for safe-area insets (notch / home-indicator).
Playwright spec at 375×667 (iPhone SE viewport) — asserts bottom-tab renders, one-column Board, Monitor list.
bun run qa clean.

Out of scope

Native app (PWA install-prompt is fine to keep).
Landscape tablet tweaks.

References

Mockup ticket — blocker.
#228 viewport fit — sets the below-md global-scroll baseline.

## User story As an operator with my phone, I want the dashboard to be usable one-handed — bottom-tab nav, stacked cards, swipable Board columns — so I can check the fleet's status from the couch without squinting at a desktop layout. ## Dependencies - **Blocked by the mobile Penpot mockup** (sibling). ## Acceptance criteria - [ ] Bottom-tab nav at `< md`. - [ ] Per-page mobile layouts per the mockup (Monitor, Pipeline, Planner, Board, Task detail, Agents). - [ ] Swipable Board columns (plain CSS scroll-snap or a light lib; no react-dnd). - [ ] `meta[name=viewport]` tuned for safe-area insets (notch / home-indicator). - [ ] Playwright spec at 375×667 (iPhone SE viewport) — asserts bottom-tab renders, one-column Board, Monitor list. - [ ] `bun run qa` clean. ## Out of scope - Native app (PWA install-prompt is fine to keep). - Landscape tablet tweaks. ## References - Mockup ticket — blocker. - #228 viewport fit — sets the below-md global-scroll baseline.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-21 12:51:04 +00:00