From d336eba27dde2f9fd661100bd4ab3a510989e856 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 2 Aug 2026 12:43:07 -0700
Subject: [PATCH] Fix sidebar user menu accessibility and full-width behavior

---
 src/app/(main)/SideNav.tsx               |  2 +-
 src/components/input/TeamsButton.tsx     |  6 ++--
 src/components/input/UserButton.test.tsx | 46 ++++++++++++++++++++++++
 src/components/input/UserButton.tsx      | 42 +++++++++++++---------
 4 files changed, 75 insertions(+), 21 deletions(-)
 create mode 100644 src/components/input/UserButton.test.tsx

diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index 51c85c06f..c06958781 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -144,7 +144,7 @@ export function SideNav(props: any) {
           </Column>
         )}
       </Column>
-      <Row paddingTop="2">
+      <Row paddingTop="2" width="100%" style={{ flexShrink: 0 }}>
         <UserButton showText={!isCollapsed} />
       </Row>
     </Column>
diff --git a/src/components/input/TeamsButton.tsx b/src/components/input/TeamsButton.tsx
index 1ef0475f3..014b7f79b 100644
--- a/src/components/input/TeamsButton.tsx
+++ b/src/components/input/TeamsButton.tsx
@@ -1,11 +1,11 @@
 import {
   Button,
+  DialogTrigger,
   Icon,
   Menu,
   MenuItem,
   MenuSection,
   MenuSeparator,
-  MenuTrigger,
   Popover,
   Row,
   Text,
@@ -53,7 +53,7 @@ export function TeamsButton() {
   };
 
   return (
-    <MenuTrigger>
+    <DialogTrigger>
       <Button variant="quiet">
         <Row
           alignItems="center"
@@ -100,6 +100,6 @@ export function TeamsButton() {
           </MenuSection>
         </Menu>
       </Popover>
-    </MenuTrigger>
+    </DialogTrigger>
   );
 }
diff --git a/src/components/input/UserButton.test.tsx b/src/components/input/UserButton.test.tsx
new file mode 100644
index 000000000..d800d9ad7
--- /dev/null
+++ b/src/components/input/UserButton.test.tsx
@@ -0,0 +1,46 @@
+import { expect, test, vi } from 'vitest';
+import { render, screen } from '@/test/render';
+import { UserButton } from './UserButton';
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock('@/components/hooks', () => ({
+  useConfig: () => ({ cloudMode: false }),
+  useLocale: () => ({ locale: 'en-US', saveLocale: vi.fn() }),
+  useLoginQuery: () => ({ user: { username: 'admin', isAdmin: false } }),
+  useMessages: () => ({
+    t: (value: string) => value,
+    labels: {
+      admin: 'Admin',
+      documentation: 'Documentation',
+      language: 'Language',
+      logout: 'Logout',
+      settings: 'Settings',
+      support: 'Support',
+      theme: 'Theme',
+    },
+  }),
+  useMobile: () => ({ isMobile: false }),
+}));
+
+test('renders the expanded sidebar control at full width and opens its menu', async () => {
+  const { user } = render(<UserButton />);
+  const button = screen.getByRole('button', { name: 'admin' });
+
+  expect(button).toHaveStyle({ width: '100%' });
+
+  await user.click(button);
+
+  expect(screen.getByRole('menuitem', { name: 'Settings' })).toBeInTheDocument();
+});
+
+test('keeps the collapsed sidebar control accessible and interactive', async () => {
+  const { user } = render(<UserButton showText={false} />);
+  const button = screen.getByRole('button', { name: 'admin' });
+
+  await user.click(button);
+
+  expect(screen.getByRole('menuitem', { name: 'Settings' })).toBeInTheDocument();
+});
diff --git a/src/components/input/UserButton.tsx b/src/components/input/UserButton.tsx
index 1d336db62..15a99c52f 100644
--- a/src/components/input/UserButton.tsx
+++ b/src/components/input/UserButton.tsx
@@ -1,12 +1,12 @@
 import {
+  Button,
   Column,
+  DialogTrigger,
   Icon,
   Menu,
   MenuItem,
   MenuSeparator,
-  MenuTrigger,
   Popover,
-  Pressable,
   Row,
   SubmenuTrigger,
   Text,
@@ -101,15 +101,19 @@ export function UserButton({ showText = true, onClose }: UserButtonProps) {
   ].filter(Boolean);
 
   const trigger = (
-    <Pressable>
+    <Button
+      variant="zero"
+      aria-label={showText ? undefined : user.username}
+      style={{ padding: 0, width: '100%', justifyContent: 'flex-start' }}
+    >
       <Row
         alignItems="center"
         flexGrow={1}
+        width="100%"
         hover={{ backgroundColor: 'surface-sunken' }}
         borderRadius
         minHeight="40px"
-        role="button"
-        style={{ cursor: 'pointer', textWrap: 'nowrap', overflow: 'hidden', outline: 'none' }}
+        style={{ textWrap: 'nowrap', overflow: 'hidden' }}
       >
         <Row alignItems="center" gap padding>
           <Icon>
@@ -118,19 +122,12 @@ export function UserButton({ showText = true, onClose }: UserButtonProps) {
           {showText && <Text>{user.username}</Text>}
         </Row>
       </Row>
-    </Pressable>
+    </Button>
   );
 
-  return (
-    <MenuTrigger>
-      {showText ? (
-        trigger
-      ) : (
-        <TooltipTrigger delay={0}>
-          {trigger}
-          <Tooltip placement="right">{user.username}</Tooltip>
-        </TooltipTrigger>
-      )}
+  const menu = (
+    <DialogTrigger>
+      {trigger}
       <Popover side="top" align="start">
         <Column minWidth="200px">
           <Menu>
@@ -224,6 +221,17 @@ export function UserButton({ showText = true, onClose }: UserButtonProps) {
           </Menu>
         </Column>
       </Popover>
-    </MenuTrigger>
+    </DialogTrigger>
+  );
+
+  if (showText) {
+    return menu;
+  }
+
+  return (
+    <TooltipTrigger delay={0}>
+      <Row width="100%">{menu}</Row>
+      <Tooltip placement="right">{user.username}</Tooltip>
+    </TooltipTrigger>
   );
 }