Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
28 lines
1.7 KiB
Markdown
28 lines
1.7 KiB
Markdown
# Responsive Behavior — Measured at 1440 / 834 / 406(~390)
|
|
|
|
> Measured live via getComputedStyle + window.innerWidth on the WorkClaw agent-chat shell.
|
|
> Breakpoints in stylesheet: max-width 767px and max-width 600px (verified earlier).
|
|
|
|
## Viewport: 1440 (desktop)
|
|
- App shell: persistent LEFT agent rail (avatars + names: WorkClaw, Morpheus, Sage Claw, Tank Claw, + add) and bottom nav (Skills, Apps, Team, Credits, user).
|
|
- Header toolbar fully expanded: Slack icon, sessions/list icon, compose icon (center) + device-preview icons & close (right).
|
|
- Welcome heading on a single line. Suggestion chips render in ONE horizontal row of 4.
|
|
- Computer panel: docked as a RIGHT rail (does not cover chat). Panel home = app grid (Browser, Slack, Claw Chat, Add Apps) + bottom dock (Skills, Files, Routines, Settings).
|
|
|
|
## Viewport: 834 (tablet)
|
|
- Computer panel becomes a FULL-SCREEN / full-width overlay (no longer a right rail); chat is hidden behind it.
|
|
- Panel home apps span full width; bottom dock centered as a floating capsule.
|
|
- Header reduces to a single close (X) control while panel is open.
|
|
|
|
## Viewport: 406 (~390 mobile)
|
|
- LEFT agent rail COLLAPSES to a single panel-toggle icon (top-left).
|
|
- Header toolbar collapses to a "..." overflow menu + a prominent CORAL Computer-panel launcher button (top-right).
|
|
- Welcome heading WRAPS to two lines; avatar centered; input full-width.
|
|
- Suggestion chips STACK vertically (single column).
|
|
- Computer panel = full-screen overlay (same as tablet).
|
|
|
|
## Transition summary
|
|
- >= ~768px: dock-rail layout (left rail + right computer rail).
|
|
- <= 767px: computer panel switches to full-screen overlay.
|
|
- <= 600px: chat shell mobile mode (rail->hamburger, toolbar->overflow, chips stack).
|