From 3f20675b936c22c1923a5b6bf1bc69f7f7522155 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Thu, 6 Jul 2023 00:00:03 +0200
Subject: [PATCH] Limit width of user menu in space panel (#11192)

Fixes: vector-im/element-web#22627
---
 res/css/structures/_SpacePanel.pcss                        | 1 +
 res/css/structures/_UserMenu.pcss                          | 7 +++++++
 src/components/structures/UserMenu.tsx                     | 1 +
 .../structures/__snapshots__/UserMenu-test.tsx.snap        | 2 +-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index e8b8d8eb04..e6f4988aae 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -370,6 +370,7 @@ limitations under the License.
         padding: 0 2px 8px;
         border-bottom: 1px solid $quinary-content;
         margin: 12px 14px 4px 18px;
+        max-width: 226px;
     }
 }
 
diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
index f37fbb7f08..e2e68746c2 100644
--- a/res/css/structures/_UserMenu.pcss
+++ b/res/css/structures/_UserMenu.pcss
@@ -46,7 +46,14 @@ limitations under the License.
         }
     }
 
+    .mx_UserMenu_contextMenuButton {
+        width: 100%;
+    }
+
     .mx_UserMenu_name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         font-weight: var(--cpd-font-weight-semibold);
         font-size: $font-15px;
         line-height: $font-24px;
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 2968c9eff3..b031274bf8 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -446,6 +446,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         return (
             <div className="mx_UserMenu">
                 <ContextMenuButton
+                    className="mx_UserMenu_contextMenuButton"
                     onClick={this.onOpenMenuClick}
                     inputRef={this.buttonRef}
                     label={_t("User menu")}
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
index 96a0432181..43675f75ff 100644
--- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
+++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
       aria-expanded="false"
       aria-haspopup="true"
       aria-label="User menu"
-      class="mx_AccessibleButton"
+      class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
       role="button"
       tabindex="0"
       title="User menu"