Limit width of the display name in user menu (#33746)

* Limit width of the display name in user menu

Fixes https://github.com/element-hq/element-web/issues/33726

* Change js-sdk moduleNameMapper to apps/web (#33734)

Turns out the pnpm link has to be set to apps/web to actually work, so update the moduleNameMapper to look there too.

* update screenshots

* Update snapshot

* Update other snapshots

* Snapshot

* More snapshots

packages/shared-components/src/menus/UserMenu/UserMenu.module.css

@@ -98,3 +98,10 @@
     margin-right: var(--cpd-space-2x);
     padding-inline-start: var(--cpd-space-1-5x);
 }
+
+.displayName {
+    max-width: 175px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}

packages/shared-components/src/menus/UserMenu/UserMenu.tsx

@@ -203,7 +203,7 @@ export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element
                 </section>
             </Menu>
             {expanded && (
-                <Text type="heading" size="sm" as="span" weight="semibold">
+                <Text type="heading" size="sm" as="span" weight="semibold" className={styles.displayName}>
                     {displayName}
                 </Text>
             )}

packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`UserMenu > renders a button 1`] = `
       </div>
     </button>
     <span
-      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
     >
       Sally Sanderson
     </span>
@@ -86,7 +86,7 @@ exports[`UserMenu > renders a button with a longer name 1`] = `
       </div>
     </button>
     <span
-      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
     >
       Sally Sanderson with a longer name
     </span>
@@ -138,7 +138,7 @@ exports[`UserMenu > renders a guest menu 1`] = `
         </div>
       </button>
       <span
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
       >
         Guest
       </span>
@@ -191,7 +191,7 @@ exports[`UserMenu > renders a menu 1`] = `
         </div>
       </button>
       <span
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
       >
         Sally Sanderson
       </span>
@@ -258,7 +258,7 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
         </div>
       </button>
       <span
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
       >
         Sally Sanderson
       </span>
@@ -571,7 +571,7 @@ exports[`UserMenu > renders an open menu 1`] = `
         </div>
       </button>
       <span
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
       >
         Sally Sanderson with a longer name
       </span>
@@ -931,7 +931,7 @@ exports[`UserMenu > renders the status emoji when set 1`] = `
       </div>
     </button>
     <span
-      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
     >
       Sally Sanderson
     </span>