From e8d97a9b5afde1473ce8ffc4eb7e4ccb1c845763 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 18 Feb 2026 19:14:43 +0100
Subject: [PATCH] Room list: make room list item scales with large font size
 (#32523)

* fix(sc): make room list item scale with large font

* fix: align room avatar view when using large font

* test(sc): add story for large font

* test(sc): update snapshots

* test(sc): add story with zoom
---
 .../with-large-font-auto.png                  | Bin 0 -> 10437 bytes
 .../with-zoom-auto.png                        | Bin 0 -> 8558 bytes
 .../RoomListItemView.module.css               |   3 +-
 .../RoomListItemView.stories.tsx              |  29 +++-
 .../RoomListItemView/RoomListItemView.tsx     |   2 +-
 .../RoomListItemView.test.tsx.snap            |  18 +-
 .../__snapshots__/RoomListView.test.tsx.snap  | 164 +++++++++---------
 .../VirtualizedRoomListView.tsx               |   5 +-
 .../VirtualizedRoomListView.test.tsx.snap     |  20 +--
 .../views/avatars/RoomAvatarView.tsx          |   5 +-
 .../RoomAvatarView-test.tsx.snap              |  21 ++-
 11 files changed, 151 insertions(+), 116 deletions(-)
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png

diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..a34f49e1a994cf4b3610bccada0a63e6882fd4ef
GIT binary patch
literal 10437
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
O&>1)HUkE2J-~123^a^SK

literal 0
HcmV?d00001

diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..791a782e27f780cd6d59ca497784309da7acb0ce
GIT binary patch
literal 8558
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
R1cEDog_-r`vY&20{5OZ?#t{Gj

literal 0
HcmV?d00001

diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css
index 108180ed60..3c31ae50e9 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css
+++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css
@@ -15,7 +15,7 @@
     /* Needed to position the selected marker */
     position: relative;
     cursor: pointer;
-    height: 44px;
+    min-height: 44px;
     width: 100%;
     /* Gap between items, accounted for in ROOM_LIST_ITEM_HEIGHT */
     margin-bottom: var(--cpd-space-2x);
@@ -60,7 +60,6 @@
 
 .container {
     flex: 1;
-    height: 100%;
     margin: 0 var(--cpd-space-3x);
     padding: 0 var(--cpd-space-2x);
     border-radius: 8px;
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
index 22a4ae0cea..e57f28c806 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX } from "react";
+import React, { type JSX, useEffect } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
@@ -218,3 +218,30 @@ export const WithoutHoverMenu: Story = {
         showMoreOptionsMenu: false,
     },
 };
+
+export const WithLargeFont: Story = {
+    args: {
+        isSelected: true,
+    },
+    decorators: [
+        (Story) => {
+            useEffect(() => {
+                document.documentElement.style.setProperty("font-size", "36px");
+            }, []);
+            return <Story />;
+        },
+    ],
+};
+
+export const WithZoom: Story = {
+    args: {
+        isSelected: true,
+    },
+    decorators: [
+        (Story, context) => (
+            <div style={{ zoom: 2 }}>
+                <Story />
+            </div>
+        ),
+    ],
+};
diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
index 9a06b67cea..de6d9010c5 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
+++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
@@ -163,7 +163,7 @@ export const RoomListItemView = memo(function RoomListItemView({
                 mx_RoomListItemView_selected: isSelected,
             })}
             gap="var(--cpd-space-3x)"
-            align="center"
+            align="stretch"
             type="button"
             role="option"
             aria-posinset={roomIndex + 1}
diff --git a/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
index 62fc0dff69..f2b144d09c 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
         class="flex roomListItem mx_RoomListItemView bold"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -153,7 +153,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
         class="flex roomListItem mx_RoomListItemView"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -288,7 +288,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
         class="flex roomListItem mx_RoomListItemView"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -441,7 +441,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
         class="flex roomListItem mx_RoomListItemView"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -570,7 +570,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
         class="flex roomListItem mx_RoomListItemView selected mx_RoomListItemView_selected"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -705,7 +705,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
         class="flex roomListItem mx_RoomListItemView"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -858,7 +858,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
         class="flex roomListItem mx_RoomListItemView"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -993,7 +993,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
         class="flex roomListItem mx_RoomListItemView bold"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
@@ -1151,7 +1151,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
         class="flex roomListItem mx_RoomListItemView bold"
         data-state="closed"
         role="option"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
       >
diff --git a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
index fdafa30c4d..c9ceef87e8 100644
--- a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -237,7 +237,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -359,7 +359,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -487,7 +487,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -609,7 +609,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -737,7 +737,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -882,7 +882,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1010,7 +1010,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1132,7 +1132,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1260,7 +1260,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1382,7 +1382,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1533,7 +1533,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1655,7 +1655,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1783,7 +1783,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -1905,7 +1905,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -2033,7 +2033,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -2178,7 +2178,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -2306,7 +2306,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -2428,7 +2428,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -2556,7 +2556,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -3414,7 +3414,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -3563,7 +3563,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -3685,7 +3685,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -3813,7 +3813,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -3935,7 +3935,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4063,7 +4063,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4208,7 +4208,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4336,7 +4336,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4458,7 +4458,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4586,7 +4586,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4708,7 +4708,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4859,7 +4859,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -4981,7 +4981,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5109,7 +5109,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5231,7 +5231,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5359,7 +5359,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5504,7 +5504,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5632,7 +5632,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5754,7 +5754,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -5882,7 +5882,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6004,7 +6004,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6155,7 +6155,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6277,7 +6277,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6405,7 +6405,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6527,7 +6527,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6655,7 +6655,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6800,7 +6800,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -6928,7 +6928,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7050,7 +7050,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7178,7 +7178,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7300,7 +7300,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7451,7 +7451,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7573,7 +7573,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7701,7 +7701,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7823,7 +7823,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -7951,7 +7951,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -8096,7 +8096,7 @@ exports[`<RoomListView /> > renders LargeList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -8368,7 +8368,7 @@ exports[`<RoomListView /> > renders SmallList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -8517,7 +8517,7 @@ exports[`<RoomListView /> > renders SmallList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -8639,7 +8639,7 @@ exports[`<RoomListView /> > renders SmallList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -8767,7 +8767,7 @@ exports[`<RoomListView /> > renders SmallList story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -8889,7 +8889,7 @@ exports[`<RoomListView /> > renders SmallList story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9097,7 +9097,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9246,7 +9246,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9368,7 +9368,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9496,7 +9496,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9618,7 +9618,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9746,7 +9746,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -9891,7 +9891,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10019,7 +10019,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10141,7 +10141,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10269,7 +10269,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10391,7 +10391,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10542,7 +10542,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10664,7 +10664,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10792,7 +10792,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -10914,7 +10914,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -11042,7 +11042,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -11187,7 +11187,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -11315,7 +11315,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -11437,7 +11437,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView bold"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
@@ -11565,7 +11565,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               class="flex roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
-              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               tabindex="-1"
               type="button"
             >
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
index 634ede2d47..5eb17ab27f 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
@@ -177,11 +177,12 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         <VirtualizedList
             context={context}
             scrollIntoViewOnChange={scrollIntoViewOnChange}
-            initialTopMostItemIndex={activeRoomIndex}
+            // If fixedItemHeight is not set and initialTopMostItemIndex=undefined, virtuoso crashes
+            // Id we don't set it, it works
+            {...(activeRoomIndex !== undefined ? { initialTopMostItemIndex: activeRoomIndex } : {})}
             data-testid="room-list"
             role="listbox"
             aria-label={_t("room_list|list_title")}
-            fixedItemHeight={ROOM_LIST_ITEM_HEIGHT}
             items={roomIds}
             getItemComponent={getItemComponent}
             getItemKey={getItemKey}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
index 2b4378067b..f0bfc91e35 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView selected bold mx_RoomListItemView_selected"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -188,7 +188,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -310,7 +310,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -438,7 +438,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView bold"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -560,7 +560,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -688,7 +688,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -833,7 +833,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView bold"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -961,7 +961,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -1083,7 +1083,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
@@ -1211,7 +1211,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 class="flex roomListItem mx_RoomListItemView bold"
                 data-state="closed"
                 role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
               >
diff --git a/src/components/views/avatars/RoomAvatarView.tsx b/src/components/views/avatars/RoomAvatarView.tsx
index 408690fa1d..b21a0ed04e 100644
--- a/src/components/views/avatars/RoomAvatarView.tsx
+++ b/src/components/views/avatars/RoomAvatarView.tsx
@@ -15,6 +15,7 @@ import OfflineIcon from "@vector-im/compound-design-tokens/assets/web/icons/pres
 import BusyIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-strikethrough-8x8";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
+import { Flex } from "@element-hq/web-shared-components";
 
 import RoomAvatar from "./RoomAvatar";
 import { AvatarBadgeDecoration, useRoomAvatarViewModel } from "../../viewmodels/avatars/RoomAvatarViewModel";
@@ -48,10 +49,10 @@ export function RoomAvatarView({ room }: RoomAvatarViewProps): JSX.Element {
             : "mx_RoomAvatarView_RoomAvatar_icon";
 
     return (
-        <div className="mx_RoomAvatarView">
+        <Flex className="mx_RoomAvatarView">
             <RoomAvatar className={classNames("mx_RoomAvatarView_RoomAvatar", maskClass)} size="32px" room={room} />
             {label ? <Tooltip label={label}>{icon}</Tooltip> : icon}
-        </div>
+        </Flex>
     );
 }
 
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
index 8c9610eeb4..ff9a6b8f05 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
@@ -27,7 +27,8 @@ exports[`<RoomAvatarView /> should not render a decoration 1`] = `
 exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"
@@ -70,7 +71,8 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
 exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"
@@ -113,7 +115,8 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
 exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"
@@ -156,7 +159,8 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
 exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"
@@ -212,7 +216,8 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
 exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"
@@ -270,7 +275,8 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
 exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"
@@ -328,7 +334,8 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
 exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
 <DocumentFragment>
   <div
-    class="mx_RoomAvatarView"
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
       aria-label="Avatar"