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
This commit is contained in:
David Baker
2026-05-08 11:52:51 +00:00
committed by GitHub
parent 4f237c7276
commit 7f0dccf855
3 changed files with 4 additions and 4 deletions
@@ -465,7 +465,7 @@ const SpacePanel: React.FC = () => {
ref={ref} ref={ref}
aria-label={_t("common|spaces")} aria-label={_t("common|spaces")}
> >
<UserMenu vm={userMenuVm} /> <UserMenu vm={userMenuVm} className="mx_UserMenu" />
<AccessibleButton <AccessibleButton
className={classNames("mx_SpacePanel_toggleCollapse", { className={classNames("mx_SpacePanel_toggleCollapse", {
expanded: !isPanelCollapsed, expanded: !isPanelCollapsed,
@@ -10,7 +10,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-expanded="false" aria-expanded="false"
aria-haspopup="menu" aria-haspopup="menu"
aria-label="User menu" aria-label="User menu"
class="_triggerButton_1ejl3_50" class="_triggerButton_1ejl3_50 mx_UserMenu"
data-state="closed" data-state="closed"
id="radix-_r_0_" id="radix-_r_0_"
type="button" type="button"
@@ -111,7 +111,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
const { userId, displayName, avatarUrl, expanded, open, manageAccountHref, actions, showAvatar } = useViewModel(vm); const { userId, displayName, avatarUrl, expanded, open, manageAccountHref, actions, showAvatar } = useViewModel(vm);
const { translate: _t } = useI18n(); const { translate: _t } = useI18n();
const trigger = ( 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} /> <Avatar id={userId} name={displayName} type="round" size="36px" src={avatarUrl} />
{expanded && ( {expanded && (
<Text type="heading" size="sm" as="span" weight="semibold"> <Text type="heading" size="sm" as="span" weight="semibold">
@@ -129,7 +129,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
onOpenChange={vm.setOpen} onOpenChange={vm.setOpen}
align="start" align="start"
side="bottom" side="bottom"
className={classNames(styles.container, className)} className={styles.container}
> >
<section className={styles.profile}> <section className={styles.profile}>
{showAvatar && <Avatar id={userId} name={displayName} type="round" size="88px" src={avatarUrl} />} {showAvatar && <Avatar id={userId} name={displayName} type="round" size="88px" src={avatarUrl} />}