From 62c57023f4b06234cb00ce6f9794fd047622126b Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Thu, 26 Feb 2026 13:03:13 +0100
Subject: [PATCH] Room list: avoid header overflowing when too long (#32645)

* fix(room list): make ellipsis works on room list title

Regression due to https://github.com/element-hq/element-web/pull/32421

* test(room list): add non regression test
---
 .../long-title-auto.png                          | Bin 0 -> 5346 bytes
 .../RoomListHeaderView.module.css                |   1 +
 .../RoomListHeaderView.stories.tsx               |  13 +++++++++++++
 3 files changed, 14 insertions(+)
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png

diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..6556f221b8068c1b12e7dba8ae160424d18ed1d1
GIT binary patch
literal 5346
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

literal 0
HcmV?d00001

diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css
index 56490fdb97..e7932ba81e 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css
@@ -13,6 +13,7 @@
 .container {
     flex: 1;
     padding-bottom: var(--cpd-space-3x);
+    min-width: 0;
 }
 
 .title {
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
index 00304c7b13..591f24c0cf 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
@@ -87,3 +87,16 @@ export const NoComposeMenu: Story = {
         displayComposeMenu: false,
     },
 };
+
+export const LongTitle: Story = {
+    decorators: [
+        (Story) => (
+            <div style={{ width: "200px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        title: "Loooooooooooooooooooooooooooooooooooooong title",
+    },
+};