style(layout): logo stays anchored on collapse + squarer corners

Refines the prior sidebar styling commit (8e166512) after manual smoke:

- Brand logo + workspace avatar: rounded-xl -> rounded-lg (crisper
  square per design review; both stay unified at the same radius).
- Logo no longer jumps on collapse. The previous code toggled
  `justify-between` ⇄ `justify-center` on the header row, which
  re-centred the logo against the parent's width — and the parent
  width animates from 256px to 64px over 200ms, so the logo slid
  from x≈112px (centred in the expanded rail) to x=16px (centred in
  the collapsed rail). Visible jump.

  Fix: the brand row is now ALWAYS `px-4` and left-aligned. The
  logo's horizontal offset (16px from the rail's left edge) is
  identical in expanded and collapsed states. Why this still looks
  centred when the rail collapses:

      rail_collapsed (64px) = logo (32px) + 2 × px-4 (2 × 16px)

  With those numbers aligned, a stationary left-aligned logo IS
  visually centred in the 64px-wide collapsed rail. The width
  transition then "slides the rail closed around" the anchored
  logo. Wordmark + Beta badge sit to the RIGHT of the logo and
  v-if-disappear on collapse; their absence doesn't shift the logo
  because they were never to its left.
- Toggle chevron placement:
  - Expanded: collapse chevron (◀) inline at the right of the brand
    row, pushed by `ms-auto` (NOT by justify-between forcing the
    layout to recentre the logo).
  - Collapsed: a SECOND row below the brand row holds a centred
    expand chevron (▶) button. Replaces the prior tucked-chip that
    overlapped the logo. No overlap, no overhang needed against the
    aside's `overflow-hidden`.
- WorkspaceSwitcher trigger: same anchor-on-the-left treatment
  applied. The `justify-center` switch on collapse is gone (it
  caused an identical avatar slide). Wrapper padding `p-[10px]` ->
  `p-2` so the avatar's left offset (wrapper 8 + trigger 8 = 16px)
  matches the SidebarHeader logo (px-4 = 16px) — the brand square
  and the workspace square are now vertically aligned in the
  collapsed rail.

Desktop only. Mobile drawer chrome tracked separately as
MOBILE-SHELL-PARITY.

Tests adapted:
- WorkspaceSwitcher.spec.ts: trigger-rounded assertion bumped
  rounded-xl -> rounded-lg; +1 spec locks "trigger never carries
  justify-center" (avatar-anchored invariant).
- SidebarHeader.spec.ts: collapsed-behaviour spec rewritten — was
  asserting `justify-center`, now asserts the row carries `px-4`
  WITHOUT either justify-center OR justify-between (the actual
  anchor contract); +1 spec confirms the expand chevron lives in a
  SIBLING row of the brand mark (no overlap).

Suite delta: 561 -> 563 (+2). vue-tsc clean. Scoped ESLint clean
(0 errors, pre-existing warnings only).

Manual smoke pending Bert: collapse/expand slowly and watch the
logo — must NOT move horizontally. Confirm rounded-lg looks crisp
(not pebble-soft). Confirm expand chevron sits in its own row
below the logo, no overlap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-21 00:45:08 +02:00
parent 8e16651232
commit 63300e5fc9
4 changed files with 142 additions and 77 deletions

View File

@@ -134,28 +134,31 @@ function inviteUser(): void {
</script>
<template>
<div class="relative flex-shrink-0 border-t border-[var(--p-content-border-color)] p-[10px]">
<div class="relative flex-shrink-0 border-t border-[var(--p-content-border-color)] p-2">
<!--
Trigger button.
Plan 2.5 P6-followup-styling: rounded-xl (matches the brand square
in SidebarHeader), p-2 padding, hover background replaces the
sharper rounded-[var(--p-border-radius)] / px-[10px] py-[8px] state.
Collapsed variant centres the avatar only, hiding the name and
chevron, so the collapsed rail reads as a vertical mirror: brand
square at the top, avatar square at the bottom.
Plan 2.5 P6-styling-fix: avatar stays anchored on collapse the
`justify-center` switch is gone (it caused the same flex-recentre
slide as the SidebarHeader logo did). The trigger is ALWAYS
left-aligned; the name + chevron sit to the RIGHT of the avatar
and disappear via v-if on collapse without shifting the avatar.
Combined with the WorkspaceSwitcher wrapper's `p-2` (was
`p-[10px]`) the avatar's left offset is 8px (wrapper) + 8px
(trigger) = 16px identical to SidebarHeader's `px-4` logo
offset, so the brand square and the workspace avatar are
vertically aligned in the collapsed rail.
Radius is `rounded-lg` (8px) — matches the brand mark; crisper
than the prior `rounded-xl` per design review.
-->
<button
class="trigger flex w-full items-center gap-[10px] rounded-xl border border-transparent bg-transparent p-2 text-[var(--p-text-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)]"
:class="[
collapsed ? 'justify-center' : '',
]"
class="trigger flex w-full items-center gap-[10px] rounded-lg border border-transparent bg-transparent p-2 text-[var(--p-text-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)]"
aria-haspopup="true"
@click="toggle"
>
<!-- Avatar square shared treatment with SidebarHeader logo (h-8 w-8 rounded-xl). Gradient background is bespoke per organisation (dynamic hex pair, RFC §7.4 inline-style). -->
<!-- Avatar squareshared treatment with SidebarHeader logo (h-8 w-8 rounded-lg). Gradient background is bespoke per organisation (dynamic hex pair, RFC §7.4 inline-style). -->
<span
v-if="current"
class="ws-logo ws-logo-square w-8 h-8 flex-shrink-0 rounded-xl inline-flex items-center justify-center text-white font-bold text-[12px]"
class="ws-logo ws-logo-square w-8 h-8 flex-shrink-0 rounded-lg inline-flex items-center justify-center text-white font-bold text-[12px]"
:style="{ background: `linear-gradient(135deg, ${current.gradient[0]}, ${current.gradient[1]})` }"
>
{{ current.initials }}