Fix long display / user names in UserMenu (#33900)

* Fix long display / user names in UserMenu

And add a playwright test to assert (see playwright screenshot for
after photo).

* Dave installs the oxfmt extension

* snapshots

apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -7,19 +7,19 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     class="mx_SpacePanel collapsed newUi"
   >
     <div
-      class="_wrapper_bh5eg_8 mx_UserMenu"
+      class="_wrapper_1yyfq_8 mx_UserMenu"
     >
       <button
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="User menu"
-        class="_triggerButton_bh5eg_107"
+        class="_triggerButton_1yyfq_111"
         data-state="closed"
         id="radix-react-use-id-1"
         type="button"
       >
         <div
-          class="_avatarWrapper_bh5eg_57"
+          class="_avatarWrapper_1yyfq_61"
         >
           <span
             aria-label="@test:test"

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

@@ -28,6 +28,10 @@
         gap: var(--cpd-space-2x);
         > * {
             margin: auto;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            overflow-wrap: break-word;
         }
 
         .displayname {

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

@@ -108,6 +108,26 @@ export const Open: Story = {
     tags: ["!dev", "!autodocs"],
 };
 
+export const OpenVeryLongName: Story = {
+    args: {
+        open: true,
+        displayName: "Sally Sanderandersonanonanonabibblybobblywooblywobblynobblynom with a name with a very long word",
+        userId: "@person-whose-username-some-might-consider-to-be-a-little-overly-long-although-thats-their-choice-and-we-must-respect-it:homeserver.com",
+        expanded: true,
+        showAvatar: true,
+    },
+    parameters: {
+        a11y: {
+            config: {
+                rules: MENU_OPEN_A11Y_RULES,
+            },
+        },
+    },
+    // Only used for playwright tests for the menu.
+    // Steals focus if actually opened on the storybook page
+    tags: ["!dev", "!autodocs"],
+};
+
 export const Condensed: Story = {
     args: {
         displayName: "Sally Sanderson with a longer name",