From 7db909a47d345aff9b4041d4a7ba26d5cc41a22a Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 28 Feb 2025 09:34:06 +0100
Subject: [PATCH] new room list: keep space name in one line in header (#29369)

* fix(new room list): keep space name in one line in header

* test(new room list): update tests
---
 .../RoomListPanel/_RoomListHeaderView.pcss    | 13 +++++++---
 .../RoomListPanel/RoomListHeaderView.tsx      |  4 ++--
 .../RoomListHeaderView-test.tsx.snap          | 24 ++++++++++++-------
 .../__snapshots__/RoomListPanel-test.tsx.snap | 12 ++++++----
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
index 6a88e61332..8ce4655e58 100644
--- a/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
+++ b/res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
@@ -9,9 +9,16 @@
     height: 60px;
     padding: 0 var(--cpd-space-3x);
 
-    h1 {
-        all: unset;
-        font: var(--cpd-font-heading-sm-semibold);
+    .mx_RoomListHeaderView_title {
+        min-width: 0;
+
+        h1 {
+            all: unset;
+            font: var(--cpd-font-heading-sm-semibold);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
     }
 
     button {
diff --git a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
index 7c82dabc2a..e8cc5dccb3 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
@@ -38,8 +38,8 @@ export function RoomListHeaderView(): JSX.Element {
             align="center"
             data-testid="room-list-header"
         >
-            <Flex align="center" gap="var(--cpd-space-1x)">
-                <h1>{vm.title}</h1>
+            <Flex className="mx_RoomListHeaderView_title" align="center" gap="var(--cpd-space-1x)">
+                <h1 title={vm.title}>{vm.title}</h1>
                 {vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
             </Flex>
             {vm.displayComposeMenu && <ComposeMenu vm={vm} />}
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
index eee7df2dd7..6e571117fd 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
@@ -9,10 +9,12 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
   >
     <div
-      class="mx_Flex"
+      class="mx_Flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
     >
-      <h1>
+      <h1
+        title="title"
+      >
         title
       </h1>
       <button
@@ -94,10 +96,12 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
   >
     <div
-      class="mx_Flex"
+      class="mx_Flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
     >
-      <h1>
+      <h1
+        title="title"
+      >
         title
       </h1>
       <button
@@ -144,10 +148,12 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
   >
     <div
-      class="mx_Flex"
+      class="mx_Flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
     >
-      <h1>
+      <h1
+        title="title"
+      >
         title
       </h1>
       <button
@@ -229,10 +235,12 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
   >
     <div
-      class="mx_Flex"
+      class="mx_Flex mx_RoomListHeaderView_title"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
     >
-      <h1>
+      <h1
+        title="title"
+      >
         title
       </h1>
     </div>
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
index d261fb9582..5125b5ed54 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap
@@ -13,10 +13,12 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
     >
       <div
-        class="mx_Flex"
+        class="mx_Flex mx_RoomListHeaderView_title"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
       >
-        <h1>
+        <h1
+          title="Home"
+        >
           Home
         </h1>
       </div>
@@ -94,10 +96,12 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
     >
       <div
-        class="mx_Flex"
+        class="mx_Flex mx_RoomListHeaderView_title"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
       >
-        <h1>
+        <h1
+          title="Home"
+        >
           Home
         </h1>
       </div>