From 5e3335bf6d9f9fd2109500de71128a7c7205cbf0 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 21 May 2026 02:08:19 +0200
Subject: [PATCH] style(layout): give expanded WorkspaceSwitcher breathing room
 from rail edges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../layout/WorkspaceSwitcher.vue              | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
index 14192e5d..35d94891 100644
--- a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
+++ b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
@@ -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"