From 968213a5d79d4ab8895839d3880e71fd25b3f0bb Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Tue, 29 Aug 2023 08:57:23 +0100
Subject: [PATCH] Fix avatar defects (#11473)

* Fix avatar initial centering in pills for bubbles

* Express user info avatar size in pixes

* fix link pill icon

* Fix snapshot test
---
 res/css/views/elements/_Pill.pcss                            | 1 +
 res/css/views/rooms/_EventBubbleTile.pcss                    | 5 -----
 src/components/views/right_panel/UserInfo.tsx                | 3 ++-
 .../views/right_panel/__snapshots__/UserInfo-test.tsx.snap   | 2 +-
 4 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss
index aa9c236f8b..f7d5c8fa60 100644
--- a/res/css/views/elements/_Pill.pcss
+++ b/res/css/views/elements/_Pill.pcss
@@ -80,6 +80,7 @@ limitations under the License.
         height: 16px;
         padding: 1px;
         width: 16px;
+        border-radius: 50%;
     }
 
     .mx_Pill_UserIcon {
diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index 4fce09f937..8dd6838411 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -415,11 +415,6 @@ limitations under the License.
         }
     }
 
-    .mx_BaseAvatar,
-    .mx_EventTile_avatar {
-        line-height: 1;
-    }
-
     &[data-has-reply="true"] {
         > .mx_EventTile_line {
             flex-direction: column;
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index a8f63ec538..be1c94164e 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -82,6 +82,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-messages";
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { asyncSome } from "../../../utils/arrays";
+import UIStore from "../../../stores/UIStore";
 
 export interface IDevice extends Device {
     ambiguous?: boolean;
@@ -1578,7 +1579,7 @@ export const UserInfoHeader: React.FC<{
                     <MemberAvatar
                         key={member.userId} // to instantly blank the avatar when UserInfo changes members
                         member={member as RoomMember}
-                        size="30vh" // 2x@30vh
+                        size={UIStore.instance.windowHeight * 0.3 + "px"}
                         resizeMethod="scale"
                         fallbackUserId={member.userId}
                         onClick={onMemberAvatarClick}
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 854f9f34f3..b851cbd14c 100644
--- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -101,7 +101,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
               data-testid="avatar-img"
               data-type="round"
               role="button"
-              style="--cpd-avatar-size: 30vh;"
+              style="--cpd-avatar-size: 230.39999999999998px;"
             >
               u
             </button>