Replace HInteractiveRectangle by HTiledelegate

src/qml/Chat/RoomSidePane/MemberDelegate.qml

@@ -1,38 +1,18 @@
 import QtQuick 2.12
-import QtQuick.Layouts 1.12
 import "../../Base"
-import "../../utils.js" as Utils
 
-HInteractiveRectangle {
+HTileDelegate {
     id: memberDelegate
-    width: memberList.width
-    height: rowLayout.height
+    spacing: roomSidePane.currentSpacing
+    rightPadding: 0
+    backgroundColor: theme.sidePane.member.background
 
-    HRowLayout {
-        id: rowLayout
-        x: roomSidePane.currentSpacing
-        width: parent.width - roomSidePane.currentSpacing * 1.5
-        height: avatar.height + roomSidePane.currentSpacing / 1.5
-        spacing: roomSidePane.currentSpacing
-
-        HUserAvatar {
-            id: avatar
-            userId: model.user_id
-            displayName: model.display_name
-            avatarUrl: model.avatar_url
-        }
-
-        HColumnLayout {
-            Layout.fillWidth: true
-
-            HLabel {
-                id: memberName
-                text: model.display_name || model.user_id
-                elide: Text.ElideRight
-                verticalAlignment: Qt.AlignVCenter
-
-                Layout.fillWidth: true
-            }
-        }
+    image: HUserAvatar {
+        userId: model.user_id
+        displayName: model.display_name
+        avatarUrl: model.avatar_url
     }
+
+    title.color: theme.sidePane.member.name
+    title.text: model.display_name || model.user_id
 }

src/qml/Chat/RoomSidePane/MembersView.qml

@@ -6,7 +6,6 @@ import "../../utils.js" as Utils
 HColumnLayout {
     HListView {
         id: memberList
-        bottomMargin: currentSpacing
 
         model: HListModel {
             keyField: "user_id"
@@ -16,7 +15,9 @@ HColumnLayout {
             )
         }
 
-        delegate: MemberDelegate {}
+        delegate: MemberDelegate {
+            width: memberList.width
+        }
 
         Layout.fillWidth: true
         Layout.fillHeight: true