Update to compound-web 9.0.1 (#33095)

* Update to compound-web 9.0.1

There are a couple of breaking changes in v9, leading to the changes in
`BugReportDialog` and `EncryptionCard`.

Most of these updates, however, are snapshot updates, due to changes in the CSS
class names in compound web (which happens due to updates in the CSS content in
those classes; `postcss-modules` generates class names based on the hash of the
CSS).

* update playwright screenshots

apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -106,7 +106,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_7h2br_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -115,7 +115,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_7h2br_43"
               data-type="round"
               height="20px"
               loading="lazy"
@@ -222,7 +222,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_7h2br_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -231,7 +231,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           >
             <img
               alt=""
-              class="_image_zysgz_43"
+              class="_image_7h2br_43"
               data-type="round"
               height="20px"
               loading="lazy"
@@ -329,7 +329,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+              class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -417,7 +417,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_7h2br_8 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
@@ -426,7 +426,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 >
                   <img
                     alt=""
-                    class="_image_zysgz_43"
+                    class="_image_7h2br_43"
                     data-type="round"
                     height="20px"
                     loading="lazy"

apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -9,10 +9,10 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_zysgz_109"
+      class="_stacked-avatars_7h2br_109"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"

apps/web/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -40,7 +40,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
         >
           <span
             aria-hidden="true"
-            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+            class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -71,7 +71,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -101,7 +101,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -131,7 +131,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -161,7 +161,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -191,7 +191,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -252,7 +252,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -282,7 +282,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
       >
         <span
           aria-hidden="true"
-          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+          class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"

apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap

@@ -20,7 +20,7 @@ exports[`ReplyChain should call setQuoteExpanded if chain is longer than 2 lines
               class="mx_ReplyTile_sender"
             >
               <span
-                class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+                class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
                 data-color="2"
                 data-testid="avatar-img"
                 data-type="round"

apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -10,10 +10,10 @@ exports[`<RoomFacePile /> renders 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_zysgz_109"
+      class="_stacked-avatars_7h2br_109"
     >
       <span
-        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
+        class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"