ListView wrapped itself in `mx-auto max-w-5xl p-4 sm:p-6`, which is the
route-page idiom. Problem: wherever the component renders, that wrapper
is wrong.
- In the workbench homepage the AppPage card is a ~480px-wide ModuleShell
with its own padding; max-w-5xl is a no-op, but the extra p-4/sm:p-6
stacks on the shell's header padding and the inner GridView hero
padding, pushing content off-centre and wasting vertical space.
- On /wardrobe the (app)/+layout already supplies
`mx-auto max-w-7xl px-3 sm:px-6 lg:px-8`, so ListView was doubling the
centring and tripling the padding.
Replace the Tailwind wrapper with a scoped `.wardrobe-root` using theme
tokens (hsl(var(--color-border)) etc.) and `container-type: inline-size`
— same pattern picture/ListView uses to adapt to its shell. Tabs move
into a scoped .wardrobe-tab style so the active underline uses a real
`border-bottom` instead of an absolute span (cleaner and no overflow
clipping on narrow cards).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
25314200b2