From b4226412585aa629bae37fc5c506f15944c69883 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 7 Feb 2024 12:26:05 -0500
Subject: [PATCH] Upgrade compound-web (#12234)

* Upgrade compound-web

I forgot to include this in https://github.com/matrix-org/matrix-react-sdk/pull/12209, which has caused avatar and username colors to be out of sync and sometimes revert to plain black/white.

* Update tests

* Update tests
---
 jest.config.ts                                |  1 +
 package.json                                  |  4 +-
 .../__snapshots__/MessagePanel-test.tsx.snap  |  4 +-
 .../__snapshots__/RoomView-test.tsx.snap      | 14 ++---
 .../SpaceHierarchy-test.tsx.snap              | 14 ++---
 .../__snapshots__/UserMenu-test.tsx.snap      |  2 +-
 .../DecoratedRoomAvatar-test.tsx.snap         |  4 +-
 .../__snapshots__/RoomAvatar-test.tsx.snap    | 10 ++--
 .../__snapshots__/BeaconMarker-test.tsx.snap  |  6 +--
 .../BeaconViewDialog-test.tsx.snap            |  4 +-
 .../__snapshots__/DialogSidebar-test.tsx.snap |  2 +-
 .../ConfirmUserActionDialog-test.tsx.snap     |  4 +-
 ...nageRestrictedJoinRuleDialog-test.tsx.snap |  4 +-
 .../__snapshots__/AppTile-test.tsx.snap       | 14 ++---
 .../__snapshots__/FacePile-test.tsx.snap      |  6 +--
 .../elements/__snapshots__/Pill-test.tsx.snap | 24 ++++-----
 .../__snapshots__/RoomFacePile-test.tsx.snap  |  6 +--
 .../components/views/location/Marker-test.tsx |  2 +-
 .../views/messages/TextualBody-test.tsx       |  2 +-
 .../__snapshots__/MLocationBody-test.tsx.snap |  4 +-
 .../__snapshots__/TextualBody-test.tsx.snap   | 28 +++++-----
 .../RoomSummaryCard-test.tsx.snap             | 44 +++++++---------
 .../__snapshots__/UserInfo-test.tsx.snap      |  2 +-
 .../__snapshots__/MemberTile-test.tsx.snap    |  6 +--
 .../PinnedEventTile-test.tsx.snap             |  6 +--
 .../__snapshots__/RoomHeader-test.tsx.snap    |  4 +-
 .../RoomPreviewBar-test.tsx.snap              | 22 ++++----
 .../__snapshots__/RoomTile-test.tsx.snap      | 16 +++---
 .../PeopleRoomSettingsTab-test.tsx.snap       |  6 +--
 .../AddExistingToSpaceDialog-test.tsx.snap    |  6 +--
 .../ThreadsActivityCentre-test.tsx.snap       | 27 +++++-----
 .../__snapshots__/HTMLExport-test.ts.snap     |  6 +--
 yarn.lock                                     | 52 +++++++++----------
 33 files changed, 173 insertions(+), 183 deletions(-)

diff --git a/jest.config.ts b/jest.config.ts
index 4c62324bcc9..182c28f68ae 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -44,6 +44,7 @@ const config: Config = {
     ],
     coverageReporters: ["text-summary", "lcov"],
     testResultsProcessor: "@casualbot/jest-sonar-reporter",
+    prettierPath: null,
 };
 
 // if we're running under GHA, enable the GHA reporter
diff --git a/package.json b/package.json
index a654514a15b..9036a277417 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.0.0",
-        "@vector-im/compound-web": "3.0.1",
+        "@vector-im/compound-web": "^3.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -151,7 +151,6 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/register": "^7.12.10",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "fake-indexeddb": "^5.0.2",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.40.1",
         "@testing-library/dom": "^9.0.0",
@@ -202,6 +201,7 @@
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^50.0.0",
         "express": "^4.18.2",
+        "fake-indexeddb": "^5.0.2",
         "fetch-mock-jest": "^1.5.1",
         "fs-extra": "^11.0.0",
         "jest": "^29.6.2",
diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
index 8746cc34a46..c7767dddb29 100644
--- a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+++ b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -94,8 +94,8 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-                  data-color="7"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+                  data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
                   role="presentation"
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index 9751b1dd39f..003c0b5c342 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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
                   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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -511,7 +511,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -593,7 +593,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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
                   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 a21da49dea4..98a0de13943 100644
--- a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -71,8 +71,8 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-              data-color="7"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+              data-color="5"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
@@ -141,8 +141,8 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-              data-color="8"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+              data-color="6"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
@@ -212,8 +212,8 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-              data-color="8"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+              data-color="2"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
@@ -289,7 +289,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               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 f1e3716f723..c4336e3f7dc 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> <UserMenu> when video broadcast when rendered should render
         class="mx_UserMenu_userAvatar"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
index 23a57ae6a6f..aa5af564dc5 100644
--- a/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
+++ b/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
@@ -6,8 +6,8 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
     class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
   >
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="3"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="1"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
diff --git a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
index a5fe97cc0cb..3ea434009b4 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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+    class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -18,8 +18,8 @@ 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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-    data-color="7"
+    class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+    data-color="3"
     data-testid="avatar-img"
     data-type="round"
     role="presentation"
@@ -33,8 +33,8 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-    data-color="2"
+    class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+    data-color="6"
     data-testid="avatar-img"
     data-type="round"
     role="presentation"
diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
index cad89c58d5c..0b469f1fb4e 100644
--- a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -4,15 +4,15 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
 <DocumentFragment>
   <span>
     <div
-      class="mx_Marker mx_Username_color8"
+      class="mx_Marker mx_Username_color6"
       id="!room:server_@alice:server"
     >
       <div
         class="mx_Marker_border"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="6"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
diff --git a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
index 1170f2359e4..49151801fff 100644
--- a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
@@ -32,8 +32,8 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
   class="mx_DialogOwnBeaconStatus"
 >
   <span
-    class="_avatar_1o69u_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_1o69u_60"
-    data-color="8"
+    class="_avatar_k41ul_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_k41ul_60"
+    data-color="6"
     data-testid="avatar-img"
     data-type="round"
     role="presentation"
diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 0fdb0fc27cc..b79b7924e91 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_1o69u_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_k41ul_60"
           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 f858d675a9d..6bd5c412672 100644
--- a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -41,8 +41,8 @@ exports[`ConfirmUserActionDialog renders 1`] = `
           class="mx_ConfirmUserActionDialog_avatar"
         >
           <span
-            class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-            data-color="7"
+            class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+            data-color="3"
             data-testid="avatar-img"
             data-type="round"
             role="presentation"
diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 6957b4b7add..90278d00b6c 100644
--- a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -71,8 +71,8 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           <div>
             <div>
               <span
-                class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-                data-color="7"
+                class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+                data-color="1"
                 data-testid="avatar-img"
                 data-type="round"
                 role="presentation"
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index b7d639e4f21..4771fc776e4 100644
--- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -108,7 +108,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_1o69u_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_k41ul_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -116,7 +116,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           >
             <img
               alt=""
-              class="_image_1o69u_49"
+              class="_image_k41ul_49"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -195,7 +195,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_1o69u_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_k41ul_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -203,7 +203,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           >
             <img
               alt=""
-              class="_image_1o69u_49"
+              class="_image_k41ul_49"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -273,7 +273,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -349,7 +349,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_1o69u_17 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_k41ul_17 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
@@ -357,7 +357,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 >
                   <img
                     alt=""
-                    class="_image_1o69u_49"
+                    class="_image_k41ul_49"
                     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 d67ac9bbb9f..4c23fa84898 100644
--- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -9,11 +9,11 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_1o69u_120"
+      class="_stacked-avatars_k41ul_110"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="8"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="4"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
index 1a9ee6b8074..6919847f61c 100644
--- a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -42,8 +42,8 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
         >
           <span
             aria-hidden="true"
-            class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-            data-color="3"
+            class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+            data-color="1"
             data-testid="avatar-img"
             data-type="round"
             role="presentation"
@@ -74,7 +74,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -105,8 +105,8 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="3"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="1"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -136,7 +136,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -167,8 +167,8 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="3"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="1"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -198,7 +198,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -252,8 +252,8 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="3"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="1"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -283,7 +283,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index 9bae98d1f31..0c0a2763fbb 100644
--- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -9,11 +9,11 @@ exports[`<RoomFacePile /> renders 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_1o69u_120"
+      class="_stacked-avatars_k41ul_110"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="8"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="4"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
diff --git a/test/components/views/location/Marker-test.tsx b/test/components/views/location/Marker-test.tsx
index 184877a6cde..ffd2379f4ec 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_color1")).toBeInTheDocument();
+        expect(container.querySelector(".mx_Marker.mx_Username_color3")).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 3c7a62f105a..45d7c90237a 100644
--- a/test/components/views/messages/TextualBody-test.tsx
+++ b/test/components/views/messages/TextualBody-test.tsx
@@ -198,7 +198,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" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_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_1o69u_49" data-type="round" width="16px" height="16px"></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" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_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_k41ul_49" data-type="round" width="16px" height="16px"></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 cdeb04fecdb..66c397c9a9f 100644
--- a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -83,8 +83,8 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
               class="mx_Marker_border"
             >
               <span
-                class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-                data-color="1"
+                class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+                data-color="3"
                 data-testid="avatar-img"
                 data-type="round"
                 role="presentation"
diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index b0e02453b67..63a3a1bd447 100644
--- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -57,15 +57,15 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
         <span
           aria-hidden="true"
           aria-label="Profile picture"
-          class="_avatar_1o69u_17 mx_BaseAvatar"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar"
+          data-color="2"
           data-testid="avatar-img"
           data-type="round"
           style="--cpd-avatar-size: 16px;"
         >
           <img
             alt=""
-            class="_image_1o69u_49"
+            class="_image_k41ul_49"
             crossorigin="anonymous"
             data-type="round"
             height="16px"
@@ -106,15 +106,15 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
             <span
               aria-hidden="true"
               aria-label="Avatar"
-              class="_avatar_1o69u_17 mx_BaseAvatar"
-              data-color="3"
+              class="_avatar_k41ul_17 mx_BaseAvatar"
+              data-color="1"
               data-testid="avatar-img"
               data-type="round"
               style="--cpd-avatar-size: 16px;"
             >
               <img
                 alt=""
-                class="_image_1o69u_49"
+                class="_image_k41ul_49"
                 crossorigin="anonymous"
                 data-type="round"
                 height="16px"
@@ -157,15 +157,15 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
             <span
               aria-hidden="true"
               aria-label="Avatar"
-              class="_avatar_1o69u_17 mx_BaseAvatar"
-              data-color="3"
+              class="_avatar_k41ul_17 mx_BaseAvatar"
+              data-color="1"
               data-testid="avatar-img"
               data-type="round"
               style="--cpd-avatar-size: 16px;"
             >
               <img
                 alt=""
-                class="_image_1o69u_49"
+                class="_image_k41ul_49"
                 crossorigin="anonymous"
                 data-type="round"
                 height="16px"
@@ -267,15 +267,15 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
         <span
           aria-hidden="true"
           aria-label="Profile picture"
-          class="_avatar_1o69u_17 mx_BaseAvatar"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar"
+          data-color="2"
           data-testid="avatar-img"
           data-type="round"
           style="--cpd-avatar-size: 16px;"
         >
           <img
             alt=""
-            class="_image_1o69u_49"
+            class="_image_k41ul_49"
             crossorigin="anonymous"
             data-type="round"
             height="16px"
@@ -296,9 +296,9 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
 </span>
 `;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_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_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_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_k41ul_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%" data-state="closed"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%" data-state="closed"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_k41ul_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
 
 exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
 <span
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 1d0aa077f3e..03ef811f2ff 100644
--- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -36,8 +36,8 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="7"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="1"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -125,15 +125,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -156,15 +155,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -187,15 +185,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -224,15 +221,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -255,15 +251,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -286,15 +281,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -317,15 +311,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
@@ -354,15 +347,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <svg
           aria-hidden="true"
           class="_nav-hint_1bcsk_60"
-          fill="none"
+          fill="currentColor"
           height="24"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-            fill="currentColor"
+            d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
           />
         </svg>
       </button>
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 da9346dbd41..48eda6f9f7e 100644
--- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -104,7 +104,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             <button
               aria-label="Profile picture"
               aria-live="off"
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
diff --git a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
index a26d2c0fd4c..08a13f3bbb3 100644
--- a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -67,7 +67,7 @@ exports[`MemberTile should display an warning E2EIcon when the e2E status = Warn
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -120,7 +120,7 @@ exports[`MemberTile should not display an E2EIcon when the e2E status = normal 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="2"
           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 f3ba9c38066..06da948c94c 100644
--- a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -6,8 +6,8 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
     class="mx_PinnedEventTile"
   >
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1o69u_60"
-      data-color="6"
+      class="_avatar_k41ul_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_k41ul_60"
+      data-color="2"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
@@ -16,7 +16,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
       a
     </span>
     <span
-      class="mx_PinnedEventTile_sender mx_Username_color6"
+      class="mx_PinnedEventTile_sender mx_Username_color2"
     >
       @alice:server.org
     </span>
diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index fd7dd0c0b4d..8066643c3d6 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
@@ -12,8 +12,8 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       tabindex="0"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="7"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="3"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
diff --git a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
index 62843249d15..2668e434226 100644
--- a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -23,8 +23,8 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="4"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="6"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
@@ -48,8 +48,8 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="4"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="6"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
@@ -73,7 +73,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -252,8 +252,8 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
   </h3>
   <p>
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="4"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="6"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
@@ -310,8 +310,8 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
   </h3>
   <p>
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="4"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="6"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
@@ -375,8 +375,8 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </h3>
   <p>
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="4"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="6"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"
diff --git a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
index 7329391d022..3349ae622f0 100644
--- a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
@@ -14,8 +14,8 @@ exports[`RoomTile when message previews are enabled and there is a message in a
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="7"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="3"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
@@ -88,8 +88,8 @@ exports[`RoomTile when message previews are enabled and there is a message in th
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="7"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="3"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
@@ -170,8 +170,8 @@ exports[`RoomTile when message previews are enabled should render a room without
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="7"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="3"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
@@ -232,8 +232,8 @@ exports[`RoomTile when message previews are not enabled should render the room 1
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="7"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="3"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"
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 232e36f6265..dd9ec232ebd 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_1o69u_17 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
+        class="_avatar_k41ul_17 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
         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_1o69u_49"
+          class="_image_k41ul_49"
           crossorigin="anonymous"
           data-type="round"
           height="42px"
@@ -110,7 +110,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       class="mx_PeopleRoomSettingsTab_knock"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_1o69u_60"
+        class="_avatar_k41ul_17 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_k41ul_60"
         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 b0c92e8867e..eb2db7dfc87 100644
--- a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -26,15 +26,15 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_1o69u_17 mx_BaseAvatar"
-            data-color="6"
+            class="_avatar_k41ul_17 mx_BaseAvatar"
+            data-color="2"
             data-testid="avatar-img"
             data-type="square"
             style="--cpd-avatar-size: 40px;"
           >
             <img
               alt=""
-              class="_image_1o69u_49"
+              class="_image_k41ul_49"
               crossorigin="anonymous"
               data-type="square"
               height="40px"
diff --git a/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 80a19900187..c5e29e38ce2 100644
--- a/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -37,8 +37,8 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         class="_icon_1bcsk_44"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="6"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -55,15 +55,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       <svg
         aria-hidden="true"
         class="_nav-hint_1bcsk_60"
-        fill="none"
+        fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-          fill="currentColor"
+          d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
         />
       </svg>
       <div
@@ -86,8 +85,8 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         class="_icon_1bcsk_44"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="6"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -104,15 +103,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       <svg
         aria-hidden="true"
         class="_nav-hint_1bcsk_60"
-        fill="none"
+        fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-          fill="currentColor"
+          d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
         />
       </svg>
       <div
@@ -135,8 +133,8 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         class="_icon_1bcsk_44"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="6"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"
@@ -153,15 +151,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       <svg
         aria-hidden="true"
         class="_nav-hint_1bcsk_60"
-        fill="none"
+        fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8.70005 17.3C8.51672 17.1167 8.42505 16.8834 8.42505 16.6C8.42505 16.3167 8.51672 16.0834 8.70005 15.9L12.6 12L8.70005 8.10005C8.51672 7.91672 8.42505 7.68338 8.42505 7.40005C8.42505 7.11672 8.51672 6.88338 8.70005 6.70005C8.88338 6.51672 9.11672 6.42505 9.40005 6.42505C9.68338 6.42505 9.91672 6.51672 10.1 6.70005L14.7 11.3C14.8 11.4 14.8709 11.5084 14.9125 11.625C14.9542 11.7417 14.975 11.8667 14.975 12C14.975 12.1334 14.9542 12.2584 14.9125 12.375C14.8709 12.4917 14.8 12.6 14.7 12.7L10.1 17.3C9.91672 17.4834 9.68338 17.575 9.40005 17.575C9.11672 17.575 8.88338 17.4834 8.70005 17.3Z"
-          fill="currentColor"
+          d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
         />
       </svg>
       <div
diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index d3cd8e23f8a..4d54ec675ce 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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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_TimelineSeparator" 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" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="7" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_TimelineSeparator" 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_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60" 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" aria-hidden="true" aria-live="off" data-state="closed">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 3936a36a53c..5da581113c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1469,32 +1469,32 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
   integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
-"@floating-ui/core@^1.4.2":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
-  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+"@floating-ui/core@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
   dependencies:
-    "@floating-ui/utils" "^0.1.3"
+    "@floating-ui/utils" "^0.2.1"
 
-"@floating-ui/dom@^1.5.1":
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
-  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+"@floating-ui/dom@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.1.tgz#d552e8444f77f2d88534372369b3771dc3a2fa5d"
+  integrity sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==
   dependencies:
-    "@floating-ui/core" "^1.4.2"
-    "@floating-ui/utils" "^0.1.3"
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.1"
 
 "@floating-ui/react-dom@^2.0.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
-  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
   dependencies:
-    "@floating-ui/dom" "^1.5.1"
+    "@floating-ui/dom" "^1.6.1"
 
-"@floating-ui/utils@^0.1.3":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
-  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+"@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.13"
@@ -3129,10 +3129,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-3.0.1.tgz#308179822841f0211d3ed6e265098efe33d51791"
-  integrity sha512-QqejUl6o+0HE/mrN2xI54KKIPWPHbfoC8+JfYstLJpatr0G496FnWUJgglfb7a33ekkmctP1Een1bwuG8yZAvQ==
+"@vector-im/compound-web@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-3.1.0.tgz#e95fcc5311656c4177c6812524e3ea3fde8fd6cf"
+  integrity sha512-JB3JOYp3cO20OY6VYJPfr26xoBWq8/QsItN+kVnuiX1I405CKq065jEysHz+1XVHYxge5rICeILlrmwzesM2bw==
   dependencies:
     "@radix-ui/react-context-menu" "^2.1.5"
     "@radix-ui/react-dropdown-menu" "^2.0.6"
@@ -9203,9 +9203,9 @@ url-parse@^1.5.3:
     requires-port "^1.0.0"
 
 use-callback-ref@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
-  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.1.tgz#9be64c3902cbd72b07fe55e56408ae3a26036fd0"
+  integrity sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==
   dependencies:
     tslib "^2.0.0"