Computer panel: filled glyphs + 32px grid inset + header padding

All verified against the captured WorkClaw panel DOM (not the reviewer's
live-preview guesses, which were wrong on two points):

- Glyphs are now FILLED — gradient on fill + stroke, 1px stroke, and a
  drop-shadow(0 1px 2px rgba(0,0,0,0.25)) — via a `filled` prop on
  GradientGlyph. Applied to the dark-tile glyphs (Claw Chat + dock
  Skills/Files/Routines/Settings). The reviewer said keep Skills outline —
  the capture shows WorkClaw fills the zap too; and it missed the drop-shadow.
- Grid inset 12px → 32px (px-8): the grid is now 336px so grid-cols-4 resolves
  to 72px tracks (capture shows repeat(4,1fr) at 336px — NOT explicit 72px cols
  as claimed; same grid-cols-4 as ours, just the right container width).
- Panel header: drop the fixed h-11/px-3, use px-8 pt-6 = padding 24px 32px 0
  (matches WorkClaw's inline style exactly).

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

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

This commit is contained in:

Omar Sobh

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

co-authored by

Claude Opus 4.8

parent 36087c30f5

commit 8dac7aff49

4 changed files with 23 additions and 7 deletions

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

BIN

View File

Binary file not shown.

Before

Width: | Height: | Size: 195 KiB

After

Width: | Height: | Size: 195 KiB