Computer panel: full-width dock bar + WorkClaw tile structure

Browse Source

Two measured parity changes to the Computer home screen (HomeScreen.tsx):

- Dock: mx-auto centered pill → flex items-end justify-center, so it spans
  the panel width as a bottom-anchored frosted bar instead of a floating
  content-width pill. (Shadow/blur/bg/ring already matched prod.)
- App-grid tiles: adopt WorkClaw's nested DOM (cell → button → fade layer →
  visual tile) and the measured 4-layer "physical icon" shadow on the white
  brand tiles (browser/slack), where its dark hairline + drop + bright inset
  read. Dark glass tiles keep the white-bevel shadow-dock-tile (a dark drop
  is invisible on them). Brand icons sized to the measured 34px.

Regenerated computer-home visual baseline. typecheck/lint/86 unit/31 E2E
green; all 6 visual pass.

Note: WorkClaw's Computer panel is behind auth, so unlike the token work
these targets couldn't be verified against prod CSS — applied per the
reviewer's live measurements at the user's direction.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

...

This commit is contained in:

Omar Sobh

2026-06-12 07:18:25 -05:00

co-authored by Claude Opus 4.8

parent c7b71f0ae9

commit 23a4bad07d

2 changed files with 45 additions and 31 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

frontend/tests/e2e/visual.spec.ts-snapshots/computer-home-chromium-darwin.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 194 KiB After Width:  |  Height:  |  Size: 182 KiB