Fix avatar defects (matrix-org#11473)

* Fix avatar initial centering in pills for bubbles * Express user info avatar size in pixes * fix link pill icon * Fix snapshot test
nordeck · Aug 29, 2023 · b01a1ef · b01a1ef
1 parent ef62124
commit b01a1ef
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>