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 00000000000..a34f49e1a99
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png differ
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 00000000000..791a782e27f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png differ
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 108180ed608..3c31ae50e94 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 22a4ae0cea7..e57f28c806d 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 9a06b67cea5..de6d9010c57 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 62fc0dff694..f2b144d09c7 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 fdafa30c4d2..c9ceef87e8f 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 634ede2d478..5eb17ab27fb 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 2b4378067b0..f0bfc91e359 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 408690fa1d5..b21a0ed04e1 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 8c9610eeb45..ff9a6b8f05c 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"