From d5335226634dab1cdd3263f77e618e009e7d3fc4 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Tue, 26 May 2026 15:02:01 +0100
Subject: [PATCH] Fix misaligned display name on desktop (#33623)

* Fix misaligned display name on desktop

Move the usermenu custom class to the whole thing, not just the button

* Update comment

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

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 65af4bfd67..a5ef90234d 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
@@ -7,13 +7,13 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     class="mx_SpacePanel collapsed newUi"
   >
     <div
-      class="_wrapper_1yvpq_8"
+      class="_wrapper_1yvpq_8 mx_UserMenu"
     >
       <button
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="User menu"
-        class="_triggerButton_1yvpq_57 mx_UserMenu"
+        class="_triggerButton_1yvpq_57"
         data-state="closed"
         id="radix-react-use-id-1"
         type="button"
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
index 0bba25cdc4..76dc98f4a5 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
@@ -102,7 +102,7 @@ export declare interface UserMenuViewActions {
 export type UserMenuViewProps = {
     vm: ViewModel<UserMenuViewSnapshot, UserMenuViewActions>;
     /**
-     * Class name for the trigger
+     * Class name for the wrapper
      */
     className?: string;
 };
@@ -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, className)} aria-label={_t("menus|user_menu|title")}>
+        <button className={styles.triggerButton} aria-label={_t("menus|user_menu|title")}>
             <Avatar id={userId} name={displayName} type="round" size="36px" src={avatarUrl} />
         </button>
     );
@@ -119,7 +119,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
     // The menu should appear to the right of the avatar, over the displayname if the menu is expanded,
     // so the display name goes outside the menu block in a wrapper.
     return (
-        <div className={styles.wrapper}>
+        <div className={classNames(styles.wrapper, className)}>
             <Menu
                 open={open}
                 showTitle={false}