style(layout): give expanded WorkspaceSwitcher breathing room from rail edges

Manual smoke showed the expanded trigger flush against the rail edges:
the wrapper used px-4 when collapsed but only p-2 when expanded.
Unified the expanded wrapper to `px-4 py-2`, matching the collapsed
state and the header brand row, so the rounded trigger card is inset
16px from both rail edges with symmetric breathing room consistent
with the header's px-4 rhythm.

Trade-off documented in the wrapper comment: with px-4 wrapper + p-2
internal trigger padding, the expanded avatar sits ~24px from the
rail edge — ~8px deeper than the bare header logo at 16px. Accepted
as deliberate (the expanded trigger reads as a distinct rounded
button card). The bare-square / logo mirror lives in the collapsed
state, which is unchanged.

No spec changes — the prior assertions cover the collapsed wrapper
(px-4 + h-[56px]) and the expanded trigger's rounded-lg shape, both
still hold. Suite delta: 564 -> 564.

Desktop only. vue-tsc clean. Scoped ESLint clean (0 errors).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-21 02:08:19 +02:00
parent a9c5746e12
commit 5e3335bf6d

View File

@@ -135,23 +135,28 @@ function inviteUser(): void {
<template> <template>
<!-- <!--
Wrapper height + horizontal padding mirror the SidebarHeader brand Wrapper horizontal padding is `px-4` (16px) in BOTH states same
row (`h-[56px] px-4`) in collapsed mode so the workspace square rhythm as the SidebarHeader brand row above (`h-[56px] px-4`).
appears as a true bottom mirror of the brand square: same 32px
rounded-lg square at the same 16px left offset from the rail,
centred in the 64px collapsed rail by the same equation
(rail = square + 2 × px-4). In expanded mode the wrapper relaxes
to `p-2` so the full trigger (avatar + name + chevron + rounded
hover bg) fits naturally.
Plan 2.5 P6-styling-switcher-align Option B: collapsed renders Collapsed: wrapper is `h-[56px] flex items-center px-4`. The bare
a BARE clickable avatar (no trigger box, no hover-bg container) 32px rounded-lg avatar sits at the px-4 offset, centred in the
so it visually mirrors the bare brand logo above. Expanded keeps 64px rail by the equation (rail = square + 2 × px-4). True bottom
the padded trigger box for the name/chevron/hover affordance. mirror of the brand square (see Option B in the brief).
Expanded: wrapper is `px-4 py-2`. The full padded trigger (`w-full`
rounded card) is now inset 16px from both rail edges, giving
symmetric breathing room that matches the header's horizontal
rhythm — prior version used `p-2` (8px) and the card felt stuck
to the rail edges. Trade-off: with px-4 wrapper + p-2 internal
trigger padding the avatar sits ~24px from the rail edge in
expanded, ~8px deeper than the bare header logo at 16px — accepted
as deliberate (the expanded trigger reads as a distinct button
card; the bare-square mirror with the logo lives in the collapsed
state, which is unchanged).
--> -->
<div <div
class="relative flex-shrink-0 border-t border-[var(--p-content-border-color)]" class="relative flex-shrink-0 border-t border-[var(--p-content-border-color)]"
:class="collapsed ? 'h-[56px] flex items-center px-4' : 'p-2'" :class="collapsed ? 'h-[56px] flex items-center px-4' : 'px-4 py-2'"
> >
<!-- <!--
Collapsed: bare 32px rounded-lg button positioned at the same Collapsed: bare 32px rounded-lg button positioned at the same
@@ -174,9 +179,10 @@ function inviteUser(): void {
<!-- <!--
Expanded trigger: full-width padded button with rounded hover bg, Expanded trigger: full-width padded button with rounded hover bg,
avatar on the left (at wrapper p-2 + trigger p-2 = 16px from rail, avatar on the left, then name and chevron. With the wrapper at
matching the collapsed avatar's offset and the header logo above), px-4 and the trigger at internal p-2, the avatar sits ~24px from
then name and chevron. the rail edge (intentional — see wrapper comment above). The
bare-square / logo mirror lives in the collapsed state.
--> -->
<button <button
v-else-if="!collapsed" v-else-if="!collapsed"