From d479d358813f3b2a5be63c2a2164c35556a2244b Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Sat, 16 May 2026 19:58:30 +0200
Subject: [PATCH] fix(gui-v2): WorkspaceSwitcher review nits (Tailwind grid,
 scoped-CSS trim, a11y button, initials guard)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../layout/WorkspaceSwitcher.vue              | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
index a5831dfe..c69cefd3 100644
--- a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
+++ b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
@@ -52,9 +52,9 @@ function buildDisplay(org: Organisation): WorkspaceDisplay {
   const words = org.name.trim().split(/\s+/)
 
   const initials
-    = words.length >= 2
+    = (words.length >= 2
       ? (words[0][0] + words[1][0]).toUpperCase()
-      : org.name.slice(0, 2).toUpperCase()
+      : org.name.slice(0, 2).toUpperCase()) || '?'
 
   return {
     id: org.id,
@@ -123,7 +123,7 @@ function selectOrg(ws: WorkspaceDisplay): void {
       <!-- Logo square (gradient background is bespoke: dynamic hex pair cannot be a static Tailwind class — RFC §7.4 justified inline-style) -->
       <span
         v-if="current"
-        class="ws-logo-square flex-shrink-0 rounded-[var(--p-border-radius)] inline-flex items-center justify-center text-white font-bold text-[12px]"
+        class="ws-logo-square w-8 h-8 flex-shrink-0 rounded-[var(--p-border-radius)] 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 }}
@@ -167,19 +167,21 @@ function selectOrg(ws: WorkspaceDisplay): void {
       <!-- .pop-ws .list: p-[6px] -->
       <div class="min-w-[280px] p-[6px]">
         <!-- .pop-ws .opt: grid 3-col, gap, p, rounded, cursor-pointer -->
-        <div
+        <!-- TODO TECH-WS-GUI-REDESIGN: full listbox/menu ARIA (role, roving tabindex, arrow-key nav) — tracked -->
+        <button
           v-for="ws in allOrgs"
           :key="ws.id"
-          class="grid cursor-pointer items-center gap-[12px] rounded-[var(--p-border-radius)] p-[10px] hover:bg-[var(--p-content-hover-background)]"
+          type="button"
+          class="grid w-full grid-cols-[36px_1fr_auto] cursor-pointer items-center gap-[12px] rounded-[var(--p-border-radius)] border-0 bg-transparent p-[10px] text-start hover:bg-[var(--p-content-hover-background)]"
           :class="[
             ws.id === current?.id ? 'bg-[var(--p-primary-50)]' : '',
           ]"
-          style="grid-template-columns: 36px 1fr auto;"
+          :aria-current="current?.id === ws.id ? 'true' : undefined"
           @click="selectOrg(ws)"
         >
           <!-- Org logo — larger variant (36px) with dynamic gradient (same inline-style justification as trigger) -->
           <span
-            class="ws-logo-square-lg flex-shrink-0 rounded-[var(--p-border-radius)] inline-flex items-center justify-center text-white font-bold text-[13px]"
+            class="ws-logo-square-lg w-9 h-9 flex-shrink-0 rounded-[var(--p-border-radius)] inline-flex items-center justify-center text-white font-bold text-[13px]"
             :style="{ background: `linear-gradient(135deg, ${ws.gradient[0]}, ${ws.gradient[1]})` }"
           >{{ ws.initials }}</span>
 
@@ -203,7 +205,7 @@ function selectOrg(ws: WorkspaceDisplay): void {
             v-else
             class="w-[18px]"
           />
-        </div>
+        </button>
       </div>
 
       <!-- Footer (.pop-ws .foot: p-[8px], border-top, flex, gap-[4px]) -->
@@ -231,26 +233,20 @@ function selectOrg(ws: WorkspaceDisplay): void {
 
 <style scoped>
 /**
- * Two layout exceptions that Tailwind cannot express as static utilities:
- *
- * 1. ws-logo-square: fixed 32×32px with inset box-shadow.
- *    Tailwind has w-8/h-8 but no built-in `box-shadow: inset 0 -2px 0 rgba(0,0,0,0.10)`.
- *    The background gradient is already handled via inline :style (dynamic hex pair).
+ * FIX 2: ws-logo-square — width/height moved to Tailwind (w-8 h-8 on the element).
+ * Tailwind has no inset directional box-shadow utility at this granularity →
+ * scoped CSS last resort per RFC §7.4.
  */
 .ws-logo-square {
-  width: 32px;
-  height: 32px;
   box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);
 }
 
 /**
- * 2. ws-logo-square-lg: larger 36×36px variant used in the dropdown list.
- *    Same box-shadow exception as above (inset shadow has no Tailwind equivalent).
- *    Background gradient set via inline :style on the element (dynamic hex pair).
+ * FIX 2: ws-logo-square-lg — width/height moved to Tailwind (w-9 h-9 on the element).
+ * Same box-shadow exception as above (inset shadow has no Tailwind equivalent).
+ * Background gradient set via inline :style on the element (dynamic hex pair).
  */
 .ws-logo-square-lg {
-  width: 36px;
-  height: 36px;
   box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);
 }
 </style>