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

res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss

@@ -9,9 +9,16 @@
     height: 60px;
     padding: 0 var(--cpd-space-3x);
 
-    h1 {
+    .mx_RoomListHeaderView_title {
-        all: unset;
+        min-width: 0;
-        font: var(--cpd-font-heading-sm-semibold);
+
+        h1 {
+            all: unset;
+            font: var(--cpd-font-heading-sm-semibold);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
     }
 
     button {

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)">
+            <Flex className="mx_RoomListHeaderView_title" align="center" gap="var(--cpd-space-1x)">
-                <h1>{vm.title}</h1>
+                <h1 title={vm.title}>{vm.title}</h1>
                 {vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
             </Flex>
             {vm.displayComposeMenu && <ComposeMenu vm={vm} />}

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>

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>