Fix avatars of knock members for people tab of room settings (#11506)

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>
matrix-org · Sep 1, 2023 · 6faad7a · 6faad7a
1 parent b1f17f5
commit 6faad7a
Show file tree

Hide file tree

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