From 5e3e9b2b1a73a48d4094a227553d05a16f0e72d0 Mon Sep 17 00:00:00 2001
From: Jalil <reachjalil@gmail.com>
Date: Wed, 5 Aug 2026 09:19:13 +0200
Subject: [PATCH 1/2] fix(den-web): contain and dismiss workspace switcher

---
 .../_components/org-dashboard-shell.tsx       | 42 +++++++++++++++++--
 .../tests/org-dashboard-shell-layout.test.ts  |  9 ++++
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx b/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx
index f8a389df38..4ba6fc51d5 100644
--- a/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx
+++ b/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   BarChart3,
   ChevronDown,
@@ -321,6 +321,8 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
   const [switcherOpen, setSwitcherOpen] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [profilePromptDismissed, setProfilePromptDismissed] = useState(false);
+  const switcherRef = useRef<HTMLDivElement>(null);
+  const switcherTriggerRef = useRef<HTMLButtonElement>(null);
   const isSingleOrgMode = runtimeConfigLoaded && runtimeConfig.orgMode === "single_org";
   const {
     query: switcherQuery,
@@ -333,6 +335,29 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
     showSearch: showSwitcherSearch,
   } = useOrgListWindow(orgDirectory, 20);
 
+  useEffect(() => {
+    if (!switcherOpen) return;
+
+    function handlePointerDown(event: PointerEvent) {
+      if (event.target instanceof Node && !switcherRef.current?.contains(event.target)) {
+        setSwitcherOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== "Escape") return;
+      setSwitcherOpen(false);
+      switcherTriggerRef.current?.focus();
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [switcherOpen]);
+
   if (orgSelectionRequired) {
     return (
       <OrgSelectionScreen
@@ -501,11 +526,15 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
       </button>
     </div>
   ) : (
-    <div className="relative">
+    <div ref={switcherRef} className="relative">
       <button
+        ref={switcherTriggerRef}
         type="button"
+        data-testid="workspace-switcher-trigger"
         className="flex w-full items-center justify-between gap-3 rounded-xl px-2 py-2 text-left transition-colors hover:bg-gray-100"
         onClick={() => setSwitcherOpen((current) => !current)}
+        aria-expanded={switcherOpen}
+        aria-haspopup="dialog"
       >
         <div className="flex min-w-0 items-center gap-3">
           <OrgMark name={activeOrg?.name ?? "OpenWork"} />
@@ -527,8 +556,13 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
       </button>
 
       {switcherOpen ? (
-        <div className="absolute bottom-[calc(100%+0.5rem)] left-0 w-[240px] z-30 grid gap-1 rounded-2xl border border-gray-200 bg-white py-2 shadow-[0_12px_24px_-12px_rgba(0,0,0,0.15)]">
-          <div className="px-3 py-1.5">
+        <div
+          data-testid="workspace-switcher-menu"
+          role="dialog"
+          aria-label="Workspace switcher"
+          className="absolute bottom-[calc(100%+0.5rem)] left-0 z-30 grid w-[240px] max-w-[calc(100vw-1.5rem)] grid-cols-[minmax(0,1fr)] gap-1 rounded-2xl border border-gray-200 bg-white py-2 shadow-[0_12px_24px_-12px_rgba(0,0,0,0.15)]"
+        >
+          <div className="min-w-0 px-3 py-1.5">
             <p className="truncate text-[13px] font-medium text-gray-900">
               {user?.email ?? "OpenWork user"}
             </p>
diff --git a/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts b/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts
index cb3c4e6e2b..ec42dc064a 100644
--- a/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts
+++ b/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts
@@ -13,4 +13,13 @@ describe("OrgDashboardShell layout", () => {
     expect(source).toMatch(/<div className="[^\"]*\bmd:h-screen\b[^\"]*\bmd:flex-row\b[^\"]*">/);
     expect(source).toMatch(/<main className="[^\"]*\bflex-1\b[^\"]*\boverflow-y-auto\b[^\"]*">/);
   });
+
+  test("bounds the workspace switcher and dismisses it from outside", () => {
+    const source = readFileSync(shellPath, "utf8");
+
+    expect(source).toContain("grid-cols-[minmax(0,1fr)]");
+    expect(source).toContain("max-w-[calc(100vw-1.5rem)]");
+    expect(source).toContain('document.addEventListener("pointerdown", handlePointerDown)');
+    expect(source).toContain("!switcherRef.current?.contains(event.target)");
+  });
 });

From 5050383afeb49a107b90cc0dcd3413e5e82b7315 Mon Sep 17 00:00:00 2001
From: Jalil <reachjalil@gmail.com>
Date: Wed, 5 Aug 2026 16:20:09 +0200
Subject: [PATCH 2/2] fix(den-web): preserve workspace switcher interactions

---
 .../(den)/dashboard/_components/org-dashboard-shell.tsx   | 8 +++++---
 ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts  | 7 +++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx b/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx
index 4ba6fc51d5..b84aa3250a 100644
--- a/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx
+++ b/ee/apps/den-web/app/(den)/dashboard/_components/org-dashboard-shell.tsx
@@ -321,7 +321,6 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
   const [switcherOpen, setSwitcherOpen] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [profilePromptDismissed, setProfilePromptDismissed] = useState(false);
-  const switcherRef = useRef<HTMLDivElement>(null);
   const switcherTriggerRef = useRef<HTMLButtonElement>(null);
   const isSingleOrgMode = runtimeConfigLoaded && runtimeConfig.orgMode === "single_org";
   const {
@@ -339,7 +338,10 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
     if (!switcherOpen) return;
 
     function handlePointerDown(event: PointerEvent) {
-      if (event.target instanceof Node && !switcherRef.current?.contains(event.target)) {
+      const clickedInsideSwitcher = event.composedPath().some(
+        (target) => target instanceof Element && target.hasAttribute("data-workspace-switcher-root"),
+      );
+      if (!clickedInsideSwitcher) {
         setSwitcherOpen(false);
       }
     }
@@ -526,7 +528,7 @@ export function OrgDashboardShell({ children }: { children: React.ReactNode }) {
       </button>
     </div>
   ) : (
-    <div ref={switcherRef} className="relative">
+    <div data-workspace-switcher-root="" className="relative">
       <button
         ref={switcherTriggerRef}
         type="button"
diff --git a/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts b/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts
index ec42dc064a..eb265e01dd 100644
--- a/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts
+++ b/ee/apps/den-web/tests/org-dashboard-shell-layout.test.ts
@@ -14,12 +14,15 @@ describe("OrgDashboardShell layout", () => {
     expect(source).toMatch(/<main className="[^\"]*\bflex-1\b[^\"]*\boverflow-y-auto\b[^\"]*">/);
   });
 
-  test("bounds the workspace switcher and dismisses it from outside", () => {
+  test("bounds the workspace switcher and dismisses only outside pointer input", () => {
     const source = readFileSync(shellPath, "utf8");
 
     expect(source).toContain("grid-cols-[minmax(0,1fr)]");
     expect(source).toContain("max-w-[calc(100vw-1.5rem)]");
     expect(source).toContain('document.addEventListener("pointerdown", handlePointerDown)');
-    expect(source).toContain("!switcherRef.current?.contains(event.target)");
+    expect(source).toContain('data-workspace-switcher-root=""');
+    expect(source).toContain("event.composedPath().some(");
+    expect(source).toContain('target.hasAttribute("data-workspace-switcher-root")');
+    expect(source).toContain("if (!clickedInsideSwitcher)");
   });
 });