diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index c2ba1f8a10..2e65f41ac5 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/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"
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png
new file mode 100644
index 0000000000..b583a0e45f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png differ
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
index 1aa0eccf47..fa361db09e 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
+++ b/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 {
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
index fd84d42dc5..0e1900d0e0 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
+++ b/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",