From 7f0dccf855385d52123fa6694e1c9e708a515457 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Fri, 8 May 2026 12:52:51 +0100
Subject: [PATCH] Fix user menu overlap with macos window controls (#33425)

* Fix user menu overlap with macos window controls

Fixes https://github.com/element-hq/element-web/issues/33424

* Snapshot

* snapshot
---
 apps/web/src/components/views/spaces/SpacePanel.tsx           | 2 +-
 .../views/spaces/__snapshots__/SpacePanel-test.tsx.snap       | 2 +-
 packages/shared-components/src/menus/UserMenu/UserMenu.tsx    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/views/spaces/SpacePanel.tsx b/apps/web/src/components/views/spaces/SpacePanel.tsx
index fd6e5ee01e..5e9713f63f 100644
--- a/apps/web/src/components/views/spaces/SpacePanel.tsx
+++ b/apps/web/src/components/views/spaces/SpacePanel.tsx
@@ -465,7 +465,7 @@ const SpacePanel: React.FC = () => {
                         ref={ref}
                         aria-label={_t("common|spaces")}
                     >
-                        <UserMenu vm={userMenuVm} />
+                        <UserMenu vm={userMenuVm} className="mx_UserMenu" />
                         <AccessibleButton
                             className={classNames("mx_SpacePanel_toggleCollapse", {
                                 expanded: !isPanelCollapsed,
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index eeecf02126..6a964e90e0 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="User menu"
-      class="_triggerButton_1ejl3_50"
+      class="_triggerButton_1ejl3_50 mx_UserMenu"
       data-state="closed"
       id="radix-_r_0_"
       type="button"
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
index 0c7dd6c537..3389cba8f8 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
@@ -111,7 +111,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
     const { userId, displayName, avatarUrl, expanded, open, manageAccountHref, actions, showAvatar } = useViewModel(vm);
     const { translate: _t } = useI18n();
     const trigger = (
-        <button className={classNames(styles.triggerButton)} aria-label={_t("menus|user_menu|title")}>
+        <button className={classNames(styles.triggerButton, className)} aria-label={_t("menus|user_menu|title")}>
             <Avatar id={userId} name={displayName} type="round" size="36px" src={avatarUrl} />
             {expanded && (
                 <Text type="heading" size="sm" as="span" weight="semibold">
@@ -129,7 +129,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
             onOpenChange={vm.setOpen}
             align="start"
             side="bottom"
-            className={classNames(styles.container, className)}
+            className={styles.container}
         >
             <section className={styles.profile}>
                 {showAvatar && <Avatar id={userId} name={displayName} type="round" size="88px" src={avatarUrl} />}