bert.hausmans
30da66456a
Holistic parity pass after repeated piecemeal switcher tweaks kept
diverging from the header logo. Side-by-side audit found size, offset
and collapsed-centering already matched (both 32px at 16px); the real
divergences were (a) the inset-shadow opacity (logo 8% vs avatar 10%)
sourced from TWO separate scoped-CSS blocks (drift risk), and (b) the
hover-bg inset was only 8px ("stuck against the edge").
- Shared brand-square recipe: both the SidebarHeader logo and the
WorkspaceSwitcher avatar now use the SAME Tailwind utilities
`w-8 h-8 rounded-lg shadow-[inset_0_-2px_0_#00000014]`. Single
source (the utility classes) so size/radius/shadow can't drift
again. The two per-component scoped `.mark` / `.ws-logo-square`
box-shadow rules are deleted (the dropdown's larger
`.ws-logo-square-lg` stays scoped — out of scope). Only the gradient
differs by design (brand teal vs per-org).
- Breathing room: the avatar's horizontal offset is pinned at 16px by
the collapsed rail (64px = 32px square + 2×16px → the only offset
that centres the square AND matches the logo's px-4). Within that
fixed 16px, the budget is split inset + internal padding: wrapper
px-3 (12px hover-bg inset for breathing room, was 8px) + trigger
px-1 (4px internal). Vertical is unconstrained → py-2 both for a
generous hover-bg height. The offset stays 16px so logo↔avatar
parity and the no-jump invariant are preserved; only the hover-bg
inset grew from 8px to 12px.
Note: the prompt's 20px-offset option is incompatible with the fixed
64px collapsed rail (20+32+20≠64 → breaks centring + reintroduces a
jump), so the 16px-offset / 12px-inset path was taken per the brief's
stated alternative.
Specs: new cross-component parity spec mounts BOTH components and
asserts the avatar + logo share the exact w-8/h-8/rounded-lg/shadow
utilities; padding spec updated to px-3 wrapper + px-1 trigger.
Borderless + hover/open-bg + sub specs retained.
Suite delta: 571 → 572 (+1). vue-tsc clean. Scoped ESLint clean
(0 errors). Desktop only.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Crewli — Organizer SPA
Main product UI for organisation and event staff (Vue 3 + Vuexy + Vuetify). Lives in this repo; only re-copy from Vuexy when upgrading the template.
Setup
- Install dependencies:
pnpm install
- Create
.env.local:
VITE_API_URL=http://localhost:8000/api/v1
VITE_APP_NAME="Crewli Organizer"
- Dev server uses port 5174 (see
vite.config.tsor run from repo root:make app).
pnpm dev --port 5174
Port
Runs on http://localhost:5174
Production: e.g. VITE_API_URL=https://api.crewli.app/api/v1 and host the SPA at https://crewli.app (see api/.env.example for FRONTEND_APP_URL and SANCTUM_STATEFUL_DOMAINS).