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>
|
<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"
|
||||||
|
|||||||
Reference in New Issue
Block a user