bert.hausmans
9f26215e54
Diagnosed against the crewli-starter SoT
(crewli-starter/src/components/layout/WorkspaceSwitcher.vue +
main.css .ws-switcher rules). Three issues Bert flagged in manual
smoke, one root cause:
ROOT CAUSE — the prior version swapped between TWO separate <button>
elements on collapse (a bare collapsed button vs a padded expanded
trigger) with different box models. Their vertical padding differed,
so the avatar's distance from the rail bottom changed by ~6px and
visibly jumped on collapse. crewli-starter instead renders ONE
`.trigger` button in both states and only hides `.meta` + `.chev`
(+ recentres) on collapse.
Fixes (all by adopting the single-trigger structure):
- Avatar no longer jumps: one `.trigger` button always; `py-2`
vertical padding constant across states; only horizontal
padding/justify changes on collapse. Avatar's vertical box is now
identical collapsed vs expanded.
- No resting border: trigger is `border-transparent` at rest and on
hover (hover only adds the grey bg), matching crewli-starter
`.trigger:hover { background }`. The wrapper has only the `border-t`
separator, no box border.
- is-open persistence: new `isOpen` ref synced from the PrimeVue
Popover `@show`/`@hide` events. While the dropdown is open the
trigger keeps the grey bg AND shows a visible border, matching
crewli-starter `.ws-switcher.is-open .trigger { background;
border-color }`. Persists until the popover closes (covers
programmatic hide via selectOrg + outside-click dismissal).
- Hover padding: trigger `px-[10px] py-2` inside a `p-[10px]` wrapper
reproduces crewli-starter's generous hover-card inset
(`.ws-switcher { padding:10px } .trigger { padding:8px 10px }`).
Collapsed alignment preserved: wrapper p-[10px] + trigger
`justify-center px-0` centres the 32px avatar at 16px from the rail's
left edge — still aligned with the SidebarHeader brand logo (px-4).
At rest the collapsed trigger is transparent, so it still reads as a
bare square mirroring the header logo; hover/open add the card.
Specs: replaced the now-obsolete "bare avatar button / no .trigger"
+ "collapsed wrapper px-4" locks with crewli-starter-structure specs:
single .trigger in both states, collapsed centres the lone avatar +
hides .meta/.chev, py-2 constant (the no-jump lock), and is-open
keeps bg+border. Sub-line + dropdown specs unchanged.
Suite delta: 569 → 571 (+2). 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).