Dima/element-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Room list: make room list item scales with large font size (#32523)

Browse Source 
* 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
This commit is contained in:
Florian Duros
2026-02-18 19:14:43 +01:00
committed by GitHub
parent 6c0d131652
commit e8d97a9b5a
11 changed files with 151 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css
+1 -2
View File
@@ -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;
packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
+28 -1
View File
@@ -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>
),
],
};
packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
+1 -1
View File
@@ -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}
packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
+9 -9
View File
@@ -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"
>
packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
+82 -82
View File
@@ -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"
>
packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
+3 -2
View File
@@ -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}
packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
+10 -10
View File
@@ -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"
>
src/components/views/avatars/RoomAvatarView.tsx
+3 -2
View File
@@ -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>
);
}
test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
+14 -7
View File
@@ -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"