Revert "Fix regression around FacePile with overflow (#11527)"

res/css/views/elements/_FacePile.pcss

@@ -15,11 +15,13 @@ limitations under the License.
 */
 
 .mx_FacePile_more {
+    /* Needed to calculate the offset on the face pile */
+    --cpd-avatar-size: 28px;
     position: relative;
     border-radius: 100%;
-    width: 30px;
-    height: 30px;
-    background-color: $spacePanel-bg-color;
+    width: 28px;
+    height: 28px;
+    background-color: $panels;
     display: inline-block;
 
     &::before {

src/components/views/elements/FacePile.tsx

@@ -57,9 +57,8 @@ const FacePile: FC<IProps> = ({
 
     const pileContents = (
         <>
-            {/* XXX: The margin-left is a workaround for Compound's styling excluding this element and being overly specific */}
-            {overflow ? <span className="mx_FacePile_more" style={{ marginLeft: `calc(${size} * -0.2)` }} /> : null}
             {faces}
+            {overflow ? <span className="mx_FacePile_more" /> : null}
         </>
     );
 

test/components/structures/__snapshots__/MessagePanel-test.tsx.snap

@@ -95,7 +95,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+                  class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
                   data-color="7"
                   data-testid="avatar-img"
                   data-type="round"

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_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -100,7 +100,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -179,7 +179,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+                  class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -267,7 +267,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -346,7 +346,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+                  class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -509,7 +509,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -587,7 +587,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+                  class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"

test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -71,7 +71,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="7"
               data-testid="avatar-img"
               data-type="round"
@@ -141,7 +141,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="8"
               data-testid="avatar-img"
               data-type="round"
@@ -212,7 +212,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="8"
               data-testid="avatar-img"
               data-type="round"
@@ -289,7 +289,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"

test/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
         class="mx_UserMenu_userAvatar"
       >
         <span
-          class="_avatar_2lhia_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"

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_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+    class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -18,7 +18,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
   <span
-    class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+    class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
     data-color="7"
     data-testid="avatar-img"
     data-type="round"
@@ -33,7 +33,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+    class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
     data-color="2"
     data-testid="avatar-img"
     data-type="round"

test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
         class="mx_Marker_border"
       >
         <span
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="8"
           data-testid="avatar-img"
           data-type="round"

test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
   class="mx_DialogOwnBeaconStatus"
 >
   <span
-    class="_avatar_2lhia_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_2lhia_56"
+    class="_avatar_ylj7w_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_ylj7w_56"
     data-color="8"
     data-testid="avatar-img"
     data-type="round"

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_2lhia_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_ylj7w_56"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"

test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap

@@ -41,7 +41,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
           class="mx_ConfirmUserActionDialog_avatar"
         >
           <span
-            class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+            class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
             data-color="7"
             data-testid="avatar-img"
             data-type="round"

test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -71,7 +71,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           <div>
             <div>
               <span
-                class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+                class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
                 data-color="7"
                 data-testid="avatar-img"
                 data-type="round"

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -104,15 +104,15 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_ylj7w_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
             style="--cpd-avatar-size: 20px;"
           >
             <img
               alt=""
-              class="_image_2lhia_45"
+              class="_image_ylj7w_45"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -191,15 +191,15 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_ylj7w_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
             style="--cpd-avatar-size: 20px;"
           >
             <img
               alt=""
-              class="_image_2lhia_45"
+              class="_image_ylj7w_45"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -269,7 +269,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+              class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -345,15 +345,15 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_2lhia_17 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_ylj7w_17 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
                   style="--cpd-avatar-size: 20px;"
                 >
                   <img
                     alt=""
-                    class="_image_2lhia_45"
+                    class="_image_ylj7w_45"
                     crossorigin="anonymous"
                     data-type="round"
                     height="20px"

test/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -7,10 +7,10 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     data-state="closed"
   >
     <div
-      class="_stacked-avatars_2lhia_116"
+      class="_stacked-avatars_ylj7w_116"
     >
       <span
-        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+        class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
         data-color="8"
         data-testid="avatar-img"
         data-type="round"

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -35,7 +35,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -66,7 +66,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -97,7 +97,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -128,7 +128,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -159,7 +159,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -190,7 +190,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -244,7 +244,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -275,7 +275,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
       >
         <span
           aria-hidden="true"
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"

test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -7,10 +7,10 @@ exports[`<RoomFacePile /> renders 1`] = `
     data-state="closed"
   >
     <div
-      class="_stacked-avatars_2lhia_116"
+      class="_stacked-avatars_ylj7w_116"
     >
       <span
-        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+        class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
         data-color="8"
         data-testid="avatar-img"
         data-type="round"

test/components/views/messages/TextualBody-test.tsx

@@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_ylj7w_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_ylj7w_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -83,7 +83,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
               class="mx_Marker_border"
             >
               <span
-                class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+                class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
                 data-color="1"
                 data-testid="avatar-img"
                 data-type="round"