Limit width of user menu in space panel (#11192)

Fixes: vector-im/element-web#22627

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;
     }
 }
 

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;

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")}

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"