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:
@@ -135,23 +135,28 @@ function inviteUser(): void {
|
||||
|
||||
<template>
|
||||
<!--
|
||||
Wrapper height + horizontal padding mirror the SidebarHeader brand
|
||||
row (`h-[56px] px-4`) in collapsed mode so the workspace square
|
||||
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.
|
||||
Wrapper horizontal padding is `px-4` (16px) in BOTH states — same
|
||||
rhythm as the SidebarHeader brand row above (`h-[56px] px-4`).
|
||||
|
||||
Plan 2.5 P6-styling-switcher-align — Option B: collapsed renders
|
||||
a BARE clickable avatar (no trigger box, no hover-bg container)
|
||||
so it visually mirrors the bare brand logo above. Expanded keeps
|
||||
the padded trigger box for the name/chevron/hover affordance.
|
||||
Collapsed: wrapper is `h-[56px] flex items-center px-4`. The bare
|
||||
32px rounded-lg avatar sits at the px-4 offset, centred in the
|
||||
64px rail by the equation (rail = square + 2 × px-4). True bottom
|
||||
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
|
||||
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
|
||||
@@ -174,9 +179,10 @@ function inviteUser(): void {
|
||||
|
||||
<!--
|
||||
Expanded trigger: full-width padded button with rounded hover bg,
|
||||
avatar on the left (at wrapper p-2 + trigger p-2 = 16px from rail,
|
||||
matching the collapsed avatar's offset and the header logo above),
|
||||
then name and chevron.
|
||||
avatar on the left, then name and chevron. With the wrapper at
|
||||
px-4 and the trigger at internal p-2, the avatar sits ~24px from
|
||||
the rail edge (intentional — see wrapper comment above). The
|
||||
bare-square / logo mirror lives in the collapsed state.
|
||||
-->
|
||||
<button
|
||||
v-else-if="!collapsed"
|
||||
|
||||
Reference in New Issue
Block a user