From 23897dff4f7993936fe80e995e2cbd1f346e4004 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Thu, 24 Aug 2023 18:12:28 +0100
Subject: [PATCH] Fix colour of avatar and colour matching with username
 (#11470)

* Use consistent colouring of username with avatar

* Upgrade Compound to fix Firefox issue

* Use the approapriate color shade for usernames

* Use the approapriate color shade for usernames

* Upgrade Compound

* Fix tests
---
 .../legacy-light/css/_legacy-light.pcss       |  16 +-
 .../css/_light-high-contrast.pcss             |  16 +-
 res/themes/light/css/_light.pcss              |  16 +-
 .../views/messages/DisambiguatedProfile.tsx   |   2 +-
 src/utils/FormattingUtils.ts                  |  28 +--
 .../__snapshots__/MessagePanel-test.tsx.snap  |   2 +-
 .../__snapshots__/RoomView-test.tsx.snap      |  14 +-
 .../SpaceHierarchy-test.tsx.snap              |   8 +-
 .../__snapshots__/UserMenu-test.tsx.snap      |   2 +-
 .../__snapshots__/RoomAvatar-test.tsx.snap    |   6 +-
 .../__snapshots__/BeaconMarker-test.tsx.snap  |   4 +-
 .../BeaconViewDialog-test.tsx.snap            |   2 +-
 .../__snapshots__/DialogSidebar-test.tsx.snap |   2 +-
 .../ConfirmUserActionDialog-test.tsx.snap     |   2 +-
 ...nageRestrictedJoinRuleDialog-test.tsx.snap |   2 +-
 .../__snapshots__/AppTile-test.tsx.snap       |  14 +-
 .../__snapshots__/FacePile-test.tsx.snap      |   2 +-
 .../elements/__snapshots__/Pill-test.tsx.snap |  16 +-
 .../components/views/location/Marker-test.tsx |   2 +-
 .../views/messages/TextualBody-test.tsx       |   2 +-
 .../__snapshots__/MLocationBody-test.tsx.snap |   2 +-
 .../__snapshots__/TextualBody-test.tsx.snap   |  24 +--
 .../RoomSummaryCard-test.tsx.snap             |   2 +-
 .../__snapshots__/UserInfo-test.tsx.snap      |   2 +-
 .../PinnedEventTile-test.tsx.snap             |   2 +-
 .../RoomPreviewBar-test.tsx.snap              |  10 +-
 .../__snapshots__/RoomTile-test.tsx.snap      |   8 +-
 .../PeopleRoomSettingsTab-test.tsx.snap       |   6 +-
 .../AddExistingToSpaceDialog-test.tsx.snap    |   4 +-
 .../__snapshots__/HTMLExport-test.ts.snap     |   6 +-
 yarn.lock                                     | 170 +++++++++++++++++-
 31 files changed, 269 insertions(+), 125 deletions(-)

diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
index ba18532d73..a48301009c 100644
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -186,14 +186,14 @@ $call-background: #15191e;
 $call-primary-content: #ffffff;
 $call-light-quaternary-content: #c1c6cd;
 
-$username-variant1-color: var(--cpd-color-blue-900);
-$username-variant2-color: var(--cpd-color-fuchsia-900);
-$username-variant3-color: var(--cpd-color-green-900);
-$username-variant4-color: var(--cpd-color-pink-900);
-$username-variant5-color: var(--cpd-color-orange-900);
-$username-variant6-color: var(--cpd-color-cyan-900);
-$username-variant7-color: var(--cpd-color-purple-900);
-$username-variant8-color: var(--cpd-color-lime-900);
+$username-variant1-color: var(--cpd-color-blue-1200);
+$username-variant2-color: var(--cpd-color-fuchsia-1200);
+$username-variant3-color: var(--cpd-color-green-1200);
+$username-variant4-color: var(--cpd-color-pink-1200);
+$username-variant5-color: var(--cpd-color-orange-1200);
+$username-variant6-color: var(--cpd-color-cyan-1200);
+$username-variant7-color: var(--cpd-color-purple-1200);
+$username-variant8-color: var(--cpd-color-lime-1200);
 
 /**
  * Creating a `semantic` color scale. This will not be needed with the new
diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
index f82284089b..1562db5eab 100644
--- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss
+++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
@@ -8,14 +8,14 @@ $tertiary-content: var(--cpd-color-gray-800);
 $quaternary-content: var(--cpd-color-gray-600);
 $quinary-content: var(--cpd-color-gray-400);
 
-$username-variant1-color: var(--cpd-color-blue-900);
-$username-variant2-color: var(--cpd-color-fuchsia-900);
-$username-variant3-color: var(--cpd-color-green-900);
-$username-variant4-color: var(--cpd-color-pink-900);
-$username-variant5-color: var(--cpd-color-orange-900);
-$username-variant6-color: var(--cpd-color-cyan-900);
-$username-variant7-color: var(--cpd-color-purple-900);
-$username-variant8-color: var(--cpd-color-lime-900);
+$username-variant1-color: var(--cpd-color-blue-1200);
+$username-variant2-color: var(--cpd-color-fuchsia-1200);
+$username-variant3-color: var(--cpd-color-green-1200);
+$username-variant4-color: var(--cpd-color-pink-1200);
+$username-variant5-color: var(--cpd-color-orange-1200);
+$username-variant6-color: var(--cpd-color-cyan-1200);
+$username-variant7-color: var(--cpd-color-purple-1200);
+$username-variant8-color: var(--cpd-color-lime-1200);
 
 $accent-alt: $links;
 $input-border-color: $secondary-content;
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index f40a56ddbb..e4428ac181 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -36,14 +36,14 @@ $alert: var(--cpd-color-text-critical-primary);
 $links: var(--cpd-color-text-link-external);
 $link-external: var(--cpd-color-text-link-external);
 
-$username-variant1-color: var(--cpd-color-blue-900);
-$username-variant2-color: var(--cpd-color-fuchsia-900);
-$username-variant3-color: var(--cpd-color-green-900);
-$username-variant4-color: var(--cpd-color-pink-900);
-$username-variant5-color: var(--cpd-color-orange-900);
-$username-variant6-color: var(--cpd-color-cyan-900);
-$username-variant7-color: var(--cpd-color-purple-900);
-$username-variant8-color: var(--cpd-color-lime-900);
+$username-variant1-color: var(--cpd-color-blue-1200);
+$username-variant2-color: var(--cpd-color-fuchsia-1200);
+$username-variant3-color: var(--cpd-color-green-1200);
+$username-variant4-color: var(--cpd-color-pink-1200);
+$username-variant5-color: var(--cpd-color-orange-1200);
+$username-variant6-color: var(--cpd-color-cyan-1200);
+$username-variant7-color: var(--cpd-color-purple-1200);
+$username-variant8-color: var(--cpd-color-lime-1200);
 /* ******************** */
 
 /**
diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx
index 20788b71cb..6810723c6e 100644
--- a/src/components/views/messages/DisambiguatedProfile.tsx
+++ b/src/components/views/messages/DisambiguatedProfile.tsx
@@ -40,7 +40,7 @@ export default class DisambiguatedProfile extends React.Component<IProps> {
 
         let colorClass: string | undefined;
         if (colored) {
-            colorClass = getUserNameColorClass(fallbackName);
+            colorClass = getUserNameColorClass(mxid ?? "");
         }
 
         let mxidElement;
diff --git a/src/utils/FormattingUtils.ts b/src/utils/FormattingUtils.ts
index d6f6cc1ef0..d12a4c704a 100644
--- a/src/utils/FormattingUtils.ts
+++ b/src/utils/FormattingUtils.ts
@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import { ReactElement, ReactNode } from "react";
+import { useIdColorHash } from "@vector-im/compound-web";
 
 import { _t, getCurrentLanguage } from "../languageHandler";
 import { jsxJoin } from "./ReactUtils";
@@ -73,30 +74,11 @@ export function formatBytes(bytes: number, decimals = 2): string {
 export function formatCryptoKey(key: string): string {
     return key.match(/.{1,4}/g)!.join(" ");
 }
-/**
- * calculates a numeric hash for a given string
- *
- * @param {string} str string to hash
- *
- * @return {number}
- */
-export function hashCode(str?: string): number {
-    let hash = 0;
-    let chr: number;
-    if (!str?.length) {
-        return hash;
-    }
-    for (let i = 0; i < str.length; i++) {
-        chr = str.charCodeAt(i);
-        hash = (hash << 5) - hash + chr;
-        hash |= 0;
-    }
-    return Math.abs(hash);
-}
 
-export function getUserNameColorClass(userId?: string): string {
-    const colorNumber = (hashCode(userId) % 8) + 1;
-    return `mx_Username_color${colorNumber}`;
+export function getUserNameColorClass(userId: string): string {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const number = useIdColorHash(userId);
+    return `mx_Username_color${number}`;
 }
 
 /**
diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
index b720bc3f6e..c8f80ad67b 100644
--- a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+++ b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -95,7 +95,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
                   data-color="7"
                   data-testid="avatar-img"
                   data-type="round"
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index a8ef7fb647..19df74f76d 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -100,7 +100,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -179,7 +179,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -267,7 +267,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -346,7 +346,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -509,7 +509,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -587,7 +587,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_i91o9_17 mx_BaseAvatar"
+                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index 286769614a..c99d5ee07d 100644
--- a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -71,7 +71,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="7"
               data-testid="avatar-img"
               data-type="round"
@@ -141,7 +141,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="8"
               data-testid="avatar-img"
               data-type="round"
@@ -212,7 +212,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="8"
               data-testid="avatar-img"
               data-type="round"
@@ -289,7 +289,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
index 65c3aa77d4..54512dd379 100644
--- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
+++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
         class="mx_UserMenu_userAvatar"
       >
         <span
-          class="_avatar_i91o9_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
index c73a88b10a..20498fd510 100644
--- a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
+++ b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
   <span
-    class="_avatar_i91o9_17 mx_BaseAvatar"
+    class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -18,7 +18,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
   <span
-    class="_avatar_i91o9_17 mx_BaseAvatar"
+    class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
     data-color="7"
     data-testid="avatar-img"
     data-type="round"
@@ -33,7 +33,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="_avatar_i91o9_17 mx_BaseAvatar"
+    class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
     data-color="2"
     data-testid="avatar-img"
     data-type="round"
diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
index 7f8bda3b20..e3e31aa3b9 100644
--- a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -4,14 +4,14 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
 <DocumentFragment>
   <span>
     <div
-      class="mx_Marker mx_Username_color4"
+      class="mx_Marker mx_Username_color8"
       id="!room:server_@alice:server"
     >
       <div
         class="mx_Marker_border"
       >
         <span
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="8"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
index 0b4ecd0986..95cbd15e28 100644
--- a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
   class="mx_DialogOwnBeaconStatus"
 >
   <span
-    class="_avatar_i91o9_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar"
+    class="_avatar_2lhia_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_2lhia_56"
     data-color="8"
     data-testid="avatar-img"
     data-type="round"
diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 30fbc8ae51..3a4810e2e2 100644
--- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
         class="mx_BeaconListItem"
       >
         <span
-          class="_avatar_i91o9_17 mx_BaseAvatar mx_BeaconListItem_avatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_2lhia_56"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index b8c98ea203..5aa92fb9d9 100644
--- a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
           class="mx_ConfirmUserActionDialog_avatar"
         >
           <span
-            class="_avatar_i91o9_17 mx_BaseAvatar"
+            class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
             data-color="7"
             data-testid="avatar-img"
             data-type="round"
diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 8026e407de..b26369b308 100644
--- a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -71,7 +71,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           <div>
             <div>
               <span
-                class="_avatar_i91o9_17 mx_BaseAvatar"
+                class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
                 data-color="7"
                 data-testid="avatar-img"
                 data-type="round"
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index 05cd609a12..0693f40f66 100644
--- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -104,7 +104,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_i91o9_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -112,7 +112,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           >
             <img
               alt=""
-              class="_image_i91o9_45"
+              class="_image_2lhia_45"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -192,7 +192,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_i91o9_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -200,7 +200,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           >
             <img
               alt=""
-              class="_image_i91o9_45"
+              class="_image_2lhia_45"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -271,7 +271,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -347,7 +347,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_i91o9_17 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
@@ -355,7 +355,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 >
                   <img
                     alt=""
-                    class="_image_i91o9_45"
+                    class="_image_2lhia_45"
                     crossorigin="anonymous"
                     data-type="round"
                     height="20px"
diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index fc359340e4..b85ec8e13a 100644
--- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
       tabindex="0"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="8"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
index 17f16ad758..1015798287 100644
--- a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -66,7 +66,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -97,7 +97,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -128,7 +128,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -159,7 +159,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -190,7 +190,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -244,7 +244,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -275,7 +275,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
       >
         <span
           aria-hidden="true"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/location/Marker-test.tsx b/test/components/views/location/Marker-test.tsx
index ffd2379f4e..184877a6cd 100644
--- a/test/components/views/location/Marker-test.tsx
+++ b/test/components/views/location/Marker-test.tsx
@@ -39,7 +39,7 @@ describe("<Marker />", () => {
     it("uses member color class", () => {
         const member = new RoomMember("!room:server", "@user:server");
         const { container } = getComponent({ useMemberColor: true, roomMember: member });
-        expect(container.querySelector(".mx_Marker.mx_Username_color3")).toBeInTheDocument();
+        expect(container.querySelector(".mx_Marker.mx_Username_color1")).toBeInTheDocument();
     });
 
     it("renders member avatar when roomMember is truthy", () => {
diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx
index 80d96ffd95..5a51e6a2b7 100644
--- a/test/components/views/messages/TextualBody-test.tsx
+++ b/test/components/views/messages/TextualBody-test.tsx
@@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_i91o9_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 
diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index c3b2a7a26b..f8f3462358 100644
--- a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -83,7 +83,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
               class="mx_Marker_border"
             >
               <span
-                class="_avatar_i91o9_17 mx_BaseAvatar"
+                class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
                 data-color="1"
                 data-testid="avatar-img"
                 data-type="round"
diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index d869b7d99a..b9c507231c 100644
--- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -57,7 +57,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
         <span
           aria-hidden="true"
           aria-label="Profile picture"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar"
           data-color="8"
           data-testid="avatar-img"
           data-type="round"
@@ -65,7 +65,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
         >
           <img
             alt=""
-            class="_image_i91o9_45"
+            class="_image_2lhia_45"
             crossorigin="anonymous"
             data-type="round"
             height="16px"
@@ -107,7 +107,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
             <span
               aria-hidden="true"
               aria-label="Avatar"
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -115,7 +115,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
             >
               <img
                 alt=""
-                class="_image_i91o9_45"
+                class="_image_2lhia_45"
                 crossorigin="anonymous"
                 data-type="round"
                 height="16px"
@@ -159,7 +159,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
             <span
               aria-hidden="true"
               aria-label="Avatar"
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -167,7 +167,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
             >
               <img
                 alt=""
-                class="_image_i91o9_45"
+                class="_image_2lhia_45"
                 crossorigin="anonymous"
                 data-type="round"
                 height="16px"
@@ -270,7 +270,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
         <span
           aria-hidden="true"
           aria-label="Profile picture"
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar"
           data-color="8"
           data-testid="avatar-img"
           data-type="round"
@@ -278,7 +278,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
         >
           <img
             alt=""
-            class="_image_i91o9_45"
+            class="_image_2lhia_45"
             crossorigin="anonymous"
             data-type="round"
             height="16px"
@@ -314,7 +314,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
         data-testid="avatar-img"
         data-type="round"
         data-color="8"
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar"
         style="--cpd-avatar-size: 16px"
         ><img
           loading="lazy"
@@ -322,7 +322,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
           src="mxc://avatar.url/image.png"
           crossorigin="anonymous"
           referrerpolicy="no-referrer"
-          class="_image_i91o9_45"
+          class="_image_2lhia_45"
           data-type="round"
           width="16px"
           height="16px"
@@ -348,7 +348,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
         data-testid="avatar-img"
         data-type="round"
         data-color="4"
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar"
         style="--cpd-avatar-size: 16px"
         ><img
           loading="lazy"
@@ -356,7 +356,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
           src="mxc://avatar.url/room.png"
           crossorigin="anonymous"
           referrerpolicy="no-referrer"
-          class="_image_i91o9_45"
+          class="_image_2lhia_45"
           data-type="round"
           width="16px"
           height="16px"
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index 46ccca964b..143b4e0b96 100644
--- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         role="presentation"
       >
         <span
-          class="_avatar_i91o9_17 mx_BaseAvatar"
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
           data-color="7"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 5fd0425c06..854f9f34f3 100644
--- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -96,7 +96,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             <button
               aria-label="Profile picture"
               aria-live="off"
-              class="_avatar_i91o9_17 mx_BaseAvatar"
+              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
diff --git a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 5b07795507..f3e5523edb 100644
--- a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
     class="mx_PinnedEventTile"
   >
     <span
-      class="_avatar_i91o9_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar"
+      class="_avatar_2lhia_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_2lhia_56"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
diff --git a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
index 0dcb6e162d..d193fbea78 100644
--- a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_i91o9_17 mx_BaseAvatar"
+      class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
       data-color="4"
       data-testid="avatar-img"
       data-type="round"
@@ -48,7 +48,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_i91o9_17 mx_BaseAvatar"
+      class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -214,7 +214,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
   </h3>
   <p>
     <span
-      class="_avatar_i91o9_17 mx_BaseAvatar"
+      class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
       data-color="4"
       data-testid="avatar-img"
       data-type="round"
@@ -272,7 +272,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
   </h3>
   <p>
     <span
-      class="_avatar_i91o9_17 mx_BaseAvatar"
+      class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
       data-color="4"
       data-testid="avatar-img"
       data-type="round"
@@ -337,7 +337,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </h3>
   <p>
     <span
-      class="_avatar_i91o9_17 mx_BaseAvatar"
+      class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
       data-color="4"
       data-testid="avatar-img"
       data-type="round"
diff --git a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
index cf1505208b..0ece644a76 100644
--- a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="7"
         data-testid="avatar-img"
         data-type="round"
@@ -88,7 +88,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="7"
         data-testid="avatar-img"
         data-type="round"
@@ -162,7 +162,7 @@ exports[`RoomTile when message previews are enabled should render a room without
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="7"
         data-testid="avatar-img"
         data-type="round"
@@ -224,7 +224,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="7"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
index 987ecf0d5d..7ba75bdef0 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
     >
       <span
         aria-label="Profile picture"
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
@@ -26,7 +26,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
       >
         <img
           alt=""
-          class="_image_i91o9_45"
+          class="_image_2lhia_45"
           crossorigin="anonymous"
           data-type="round"
           height="42px"
@@ -111,7 +111,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       class="mx_PeopleRoomSettingsTab_knock"
     >
       <span
-        class="_avatar_i91o9_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index 815c862966..1360328595 100644
--- a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_i91o9_17 mx_BaseAvatar"
+            class="_avatar_2lhia_17 mx_BaseAvatar"
             data-color="6"
             data-testid="avatar-img"
             data-type="square"
@@ -34,7 +34,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
           >
             <img
               alt=""
-              class="_image_i91o9_45"
+              class="_image_2lhia_45"
               crossorigin="anonymous"
               data-type="square"
               height="40px"
diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index d2d645cbaa..1bb59a96bb 100644
--- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
@@ -25,7 +25,7 @@ exports[`HTMLExport should export 1`] = `
                         <div class="mx_LegacyRoomHeader_wrapper" aria-owns="mx_RightPanel">
                             <div class="mx_LegacyRoomHeader_avatar">
                             <div class="mx_DecoratedRoomAvatar">
-                               <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size:32px">!</span>
+                               <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
                             </div>
                             </div>
                             <div class="mx_LegacyRoomHeader_name">
@@ -60,13 +60,13 @@ exports[`HTMLExport should export 1`] = `
                                     role="list"
                                 >
                                 <div class="mx_NewRoomIntro">
-                                        <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size:32px">!</span>
+                                        <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
                                         <h2> !myroom:example.org </h2>
                                         <p>  created this room. <br/><br/> <p><span>This is the start of export of <b>!myroom:example.org</b>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><b>@userId:matrix.org</b></a> at 11/17/2022.</span></p> </p>
                                         <br/>
                                         <p>  </p>
                                     </div>
-                                <li><div class="mx_DateSeparator" role="separator" aria-label="Thu, Jan 1, 1970"><hr role="none"/><div class="mx_DateSeparator_dateContent"><h2 class="mx_DateSeparator_dateHeading" aria-hidden="true">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user49:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:54" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #49</span></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user48:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:53" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #48</span></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user47:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:52" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #47</span></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user46:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:51" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #46</span></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user45:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:50" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #45</span></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user44:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:49" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #44</span></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user43:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:48" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #43</span></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user42:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:47" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #42</span></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user41:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:46" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #41</span></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user40:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:45" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #40</span></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user39:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:44" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #39</span></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user38:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:43" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #38</span></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user37:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:42" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #37</span></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user36:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:41" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #36</span></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user35:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:40" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #35</span></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user34:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:39" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #34</span></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user33:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:38" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #33</span></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user32:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:37" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #32</span></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user31:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:36" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #31</span></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user30:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:35" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #30</span></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user29:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:34" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #29</span></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user28:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:33" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #28</span></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user27:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:32" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #27</span></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user26:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:31" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #26</span></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user25:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:30" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #25</span></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user24:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:29" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #24</span></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user23:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:28" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #23</span></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user22:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:27" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #22</span></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user21:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:26" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #21</span></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user20:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:25" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #20</span></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user19:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:24" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #19</span></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user18:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:23" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #18</span></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user17:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:22" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #17</span></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user16:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:21" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #16</span></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user15:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:20" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #15</span></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user14:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:19" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #14</span></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user13:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:18" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #13</span></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user12:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:17" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #12</span></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user11:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:16" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #11</span></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user10:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:15" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #10</span></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user9:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:14" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #9</span></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user8:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:13" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #8</span></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user7:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:12" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #7</span></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user6:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:11" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #6</span></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user5:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:10" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #5</span></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user4:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:09" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #4</span></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user3:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:08" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #3</span></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user2:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:07" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #2</span></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user1:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:06" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #1</span></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user0:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_i91o9_17 mx_BaseAvatar" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:05" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #0</span></div></div></li></div>
+                                <li><div class="mx_DateSeparator" role="separator" aria-label="Thu, Jan 1, 1970"><hr role="none"/><div class="mx_DateSeparator_dateContent"><h2 class="mx_DateSeparator_dateHeading" aria-hidden="true">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user49:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:54" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #49</span></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user48:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:53" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #48</span></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user47:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:52" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #47</span></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user46:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:51" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #46</span></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user45:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:50" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #45</span></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user44:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:49" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #44</span></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user43:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:48" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #43</span></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user42:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:47" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #42</span></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user41:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:46" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #41</span></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user40:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:45" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #40</span></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user39:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:44" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #39</span></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user38:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:43" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #38</span></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user37:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:42" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #37</span></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user36:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:41" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #36</span></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user35:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:40" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #35</span></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user34:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:39" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #34</span></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user33:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:38" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #33</span></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user32:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:37" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #32</span></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user31:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:36" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #31</span></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user30:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:35" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #30</span></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user29:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:34" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #29</span></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user28:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:33" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #28</span></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user27:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:32" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #27</span></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user26:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:31" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #26</span></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user25:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:30" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #25</span></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user24:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:29" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #24</span></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user23:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:28" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #23</span></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user22:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:27" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #22</span></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user21:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:26" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #21</span></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user20:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:25" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #20</span></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user19:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:24" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #19</span></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user18:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:23" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #18</span></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user17:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:22" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #17</span></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user16:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:21" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #16</span></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user15:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:20" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #15</span></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user14:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:19" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #14</span></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user13:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:18" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #13</span></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user12:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:17" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #12</span></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user11:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:16" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #11</span></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user10:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:15" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #10</span></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user9:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:14" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #9</span></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user8:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:13" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #8</span></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user7:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:12" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #7</span></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user6:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:11" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #6</span></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color8 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user5:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:10" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #5</span></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color7 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user4:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:09" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #4</span></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user3:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:08" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #3</span></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user2:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:07" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #2</span></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user1:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:06" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #1</span></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" title="@user0:example.com" aria-label="Profile picture" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size: 30px;">u</button></div><div class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" aria-label="00:00"><span class="mx_MessageTimestamp" title="Thu, Jan 1, 1970, 00:00:05" aria-hidden="true" aria-live="off">00:00</span></a><div class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body" dir="auto">Message #0</span></div></div></li></div>
                                 </ol>
                                 </div>
                             </div>
diff --git a/yarn.lock b/yarn.lock
index b4e3194a94..47dcab6b69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1251,13 +1251,20 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
   integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.13.10":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
+  integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -1429,6 +1436,33 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.44.0.tgz#961a5903c74139390478bdc808bcde3fc45ab7af"
   integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==
 
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/dom@^1.3.0":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/react-dom@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
+  integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
+  dependencies:
+    "@floating-ui/dom" "^1.3.0"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -2194,6 +2228,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -2208,6 +2250,18 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-dismissable-layer@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
+  integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
 "@radix-ui/react-form@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a"
@@ -2237,6 +2291,40 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-popper@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9"
+  integrity sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-portal@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
+  integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-primitive@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
@@ -2253,6 +2341,48 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-tooltip@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz#87a7786cd9f2b4de957ac645afae1575339c58b0"
+  integrity sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.2"
+    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-use-layout-effect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
@@ -2260,6 +2390,37 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-visually-hidden@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
+  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@sentry-internal/tracing@7.64.0":
   version "7.64.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.64.0.tgz#3e110473b8edf805b799cc91d6ee592830237bb4"
@@ -2903,11 +3064,12 @@
     svg2vectordrawable "^2.9.1"
 
 "@vector-im/compound-web@^0.2.3":
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.10.tgz#7178844159338ccaca63e0acce3a1ce94768f79c"
-  integrity sha512-dnD4ffbANPwWlApXxy5g3prcAD8WjGhtGbLMW5JiOruYwLNRFZ75XaTI22pYykfyl03VZeXapAfU/pNm/jZE1A==
+  version "0.2.15"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.15.tgz#89121053cae95cc4fa82b84fc4ebf87cdf75c564"
+  integrity sha512-F4ay88XJH9LkGrHcpHyJnqqkWOdYmzwLbTQjbjokKwOPeDvcLJDZkTyRR03GbU8Ir/tlGYSx0TbrXA5XQI0g3A==
   dependencies:
     "@radix-ui/react-form" "^0.0.3"
+    "@radix-ui/react-tooltip" "^1.0.6"
     classnames "^2.3.2"
     graphemer "^1.4.0"
     rimraf "^3.0.1"