[Backport staging] Fix misaligned display name on desktop (#33626)

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

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-_r_0_"
         type="button"

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}