* feat(ui): frame-layout shell, pill buttons, 24px page titles (UI migration PR 1)
The visual shell from the concept, zero behavior change:
- New --frame token pair (40 18% 96% light / 0 0% 5% dark); the dashboard
wrapper is bg-frame and <main> becomes a rounded 12px panel with its own
inner scroll (md-gated; mobile keeps document flow + bottom nav)
- Sidebar goes borderless/transparent on the frame
- Buttons are pills app-wide (radius 99px, default 7px/16px padding, 13px
text, icon buttons become circles), set once in components/ui/button.tsx
- PageHeader locked at exactly 24px/32px Hedvig serif
- MainContainer resets panel scroll on route change (Next's window
scroll-to-top never fires for an inner scroll container)
- chat layout + extension workspaces switch viewport-height formulas to
h-full so they fill the panel instead of overflowing it by 20px
- .claude/rules/design.md rewritten with the 14 locked UI-migration
conventions from dev_docs/ui_migration_plan.md
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(ui): clamp hand-rolled page titles to the locked 24px/32px
Transaktioner (TransactionStatusBar) and 13 other pages hand-roll their
h1 instead of using PageHeader, so they kept text-3xl/4xl after the
shell change. Clamp them all to font-display text-2xl leading-8.
Onboarding heroes and headline numbers are intentionally untouched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(ui): keep the frame strip above the panel on banner-less accounts
<main>'s 10px top margin was the first in-flow margin inside the shell
wrapper, so it collapsed through the wrapper and pushed the whole shell
down, showing white body background above the panel instead of the warm
frame strip (only visible on real accounts: the sandbox banner blocked
the collapse). Flex containers never collapse child margins, so the
shell wrappers become md:flex md:flex-col.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Jakob Wennberg
6b506a9ca8