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>
bert.hausmans
9f26215e54