From 6faad7aae31bb04a7de275fd24f775bab56c0d83 Mon Sep 17 00:00:00 2001
From: Charly Nguyen <1422657+charlynguyen@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:40:35 +0200
Subject: [PATCH] Fix avatars of knock members for people tab of room settings
 (#11506)

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>
---
 res/css/views/settings/tabs/room/_PeopleRoomSettingsTab.pcss | 5 +++++
 .../views/settings/tabs/room/PeopleRoomSettingsTab.tsx       | 2 +-
 .../room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap   | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/res/css/views/settings/tabs/room/_PeopleRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_PeopleRoomSettingsTab.pcss
index 0b9c5c00a28..4341d248d9f 100644
--- a/res/css/views/settings/tabs/room/_PeopleRoomSettingsTab.pcss
+++ b/res/css/views/settings/tabs/room/_PeopleRoomSettingsTab.pcss
@@ -24,6 +24,11 @@ limitations under the License.
     margin: 0 var(--cpd-space-4x);
 }
 
+.mx_PeopleRoomSettingsTab_avatar {
+    align-self: flex-start;
+    flex-shrink: 0;
+}
+
 .mx_PeopleRoomSettingsTab_name {
     font-weight: var(--cpd-font-weight-semibold);
 }
diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
index 750dfdf71d2..32411f54028 100644
--- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
@@ -82,7 +82,7 @@ const Knock: VFC<{
 
     return (
         <div className="mx_PeopleRoomSettingsTab_knock">
-            <MemberAvatar member={roomMember} size="42px" />
+            <MemberAvatar className="mx_PeopleRoomSettingsTab_avatar" member={roomMember} size="42px" />
             <div className="mx_PeopleRoomSettingsTab_content">
                 <span className="mx_PeopleRoomSettingsTab_name">{roomMember.name}</span>
                 <Timestamp roomMember={roomMember} />
diff --git a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
index 7ba75bdef0d..8e6a9aa46aa 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
     >
       <span
         aria-label="Profile picture"
-        class="_avatar_2lhia_17 mx_BaseAvatar"
+        class="_avatar_2lhia_17 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
@@ -111,7 +111,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       class="mx_PeopleRoomSettingsTab_knock"
     >
       <span
-        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+        class="_avatar_2lhia_17 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_2lhia_56"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"