Restyle Avatar

Make it a circle with the profile picture centered,
with a max height/width of 30vh

res/css/views/right_panel/_UserInfo.scss

@@ -38,6 +38,7 @@ limitations under the License.
     mask-repeat: no-repeat;
     mask-position: 16px center;
     background-color: $rightpanel-button-color;
+    position: absolute;
 }
 
 .mx_UserInfo_profile h2 {
@@ -47,7 +48,7 @@ limitations under the License.
 }
 
 .mx_UserInfo h2 {
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 600;
     margin: 16px 0 8px 0;
 }
@@ -74,15 +75,27 @@ limitations under the License.
 }
 
 .mx_UserInfo_avatar {
-    background: $tagpanel-bg-color;
+    margin: 24px 32px 0 32px;
 }
 
-.mx_UserInfo_avatar > img {
-    height: auto;
-    width: 100%;
+.mx_UserInfo_avatar > div {
+    max-width: 30vh;
+    margin: 0 auto;
+}
+
+.mx_UserInfo_avatar > div > div {
+    /* use padding-top instead of height to make this element square,
+    as the % in padding is a % of the width (including margin,
+    that's why we had to put the margin to center on a parent div),
+    and not a % of the parent height. */
+    padding-top: 100%;
+    height: 0;
+    border-radius: 100%;
     max-height: 30vh;
-    object-fit: contain;
-    display: block;
+    box-sizing: content-box;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
 }
 
 .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

src/components/views/right_panel/UserInfo.js

@@ -40,6 +40,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
 import E2EIcon from "../rooms/E2EIcon";
 import withLegacyMatrixClient from "../../../utils/withLegacyMatrixClient";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {ContentRepo} from 'matrix-js-sdk';
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -917,6 +918,12 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
         _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
     }, [user.roomId, user.userId, room && room.currentState, cli]); // eslint-disable-line
 
+    const onMemberAvatarKey = e => {
+        if (e.key === "Enter") {
+            onMemberAvatarClick();
+        }
+    };
+
     const onMemberAvatarClick = useCallback(() => {
         const member = user;
         const avatarUrl = member.getMxcAvatarUrl();
@@ -1045,8 +1052,15 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
     let avatarElement;
     if (avatarUrl) {
         const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800);
-        avatarElement = <div className="mx_UserInfo_avatar" onClick={onMemberAvatarClick}>
-            <img src={httpUrl} alt={_t("Profile picture")} />
+        avatarElement = <div
+            className="mx_UserInfo_avatar"
+            onClick={onMemberAvatarClick}
+            onKeyDown={onMemberAvatarKey}
+            tabIndex="0"
+            role="img"
+            aria-label={_t("Profile picture")}
+        >
+            <div><div style={{backgroundImage: `url(${httpUrl})`}} /></div>
         </div>;
     }