From 64f762d7b0f37661307697103c8412d75c956fdb Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Fri, 25 Aug 2023 14:52:20 +0100
Subject: [PATCH] Fix consistent avatar output for Percy (#11472)

* Fix consistent avatar output for Percy

* Fix last room in list clipped

Fixes https://github.com/vector-im/element-web/issues/26049

* Fix decorated avatar indicator centering

Fixes https://github.com/vector-im/element-web/issues/26052

* Fix uploader centering
---
 res/css/views/avatars/_BaseAvatar.pcss          | 1 +
 res/css/views/avatars/_DecoratedRoomAvatar.pcss | 9 ++++-----
 res/css/views/elements/_MiniAvatarUploader.pcss | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/res/css/views/avatars/_BaseAvatar.pcss b/res/css/views/avatars/_BaseAvatar.pcss
index 5d0ece53be..52fd8452d3 100644
--- a/res/css/views/avatars/_BaseAvatar.pcss
+++ b/res/css/views/avatars/_BaseAvatar.pcss
@@ -19,5 +19,6 @@ limitations under the License.
     /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
     .mx_BaseAvatar {
         background-color: var(--percy-color-avatar) !important;
+        color: white !important;
     }
 }
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
index 7c39da8414..2d430981a3 100644
--- a/res/css/views/avatars/_DecoratedRoomAvatar.pcss
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
@@ -18,7 +18,7 @@ limitations under the License.
 .mx_ExtraTile {
     position: relative;
     contain: content;
-    line-height: 1;
+    line-height: 0;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
         mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg");
@@ -30,10 +30,9 @@ limitations under the License.
     .mx_DecoratedRoomAvatar_icon {
         position: absolute;
         /* the following percentage based sizings are to match the scalable svg mask for the cutout */
-        bottom: 0;
-        right: 0;
-        transform: translate(-25%, -70%);
-        width: 25%;
+        bottom: 6.25%; // 2px for a 32x32 avatar
+        right: 6.25%;
+        width: 25%; // 8px for a 32x32 avatar
         height: 25%;
         border-radius: 50%;
     }
diff --git a/res/css/views/elements/_MiniAvatarUploader.pcss b/res/css/views/elements/_MiniAvatarUploader.pcss
index b28886a103..01616cd3dd 100644
--- a/res/css/views/elements/_MiniAvatarUploader.pcss
+++ b/res/css/views/elements/_MiniAvatarUploader.pcss
@@ -43,6 +43,8 @@ limitations under the License.
         border-radius: 50%;
         z-index: 1;
 
+        line-height: 0;
+
         .mx_MiniAvatarUploader_cameraIcon {
             height: 100%;
             width: 100%;