fix(MembersTabPanel): Buttons in the Member tab do not work

- move the MouseArea into `background` so that it doesn't obscure the
potential action buttons
- fixup SB page

Fixes #16426

storybook/pages/MembersTabPanelPage.qml

@@ -12,6 +12,7 @@ import Models 1.0
 import SortFilterProxyModel 0.2
 import Storybook 1.0
 
+import StatusQ 0.1
 import StatusQ.Core.Utils 0.1 as SQUtils
 
 SplitView {
@@ -54,7 +55,7 @@ SplitView {
             Global.userProfile = this
         }
         Component.onDestruction: {
-            Utils.userProfile = {}
+            Global.userProfile = {}
         }
     }
 
@@ -85,6 +86,10 @@ SplitView {
         onDeclineRequestToJoin: {
             logs.logEvent("MembersTabPanel::onDeclineRequestToJoin", ["id"], arguments)
         }
+
+        onViewMemberMessagesClicked: {
+            logs.logEvent("MembersTabPanel::onViewMemberMessagesClicked", ["pubKey", "displayName"], arguments)
+        }
     }
 
     UsersModel {
@@ -104,16 +109,26 @@ SplitView {
         sortRole: membersTabPanelPage.panelType
 
         proxyRoles: [
-            ExpressionRole {
+            FastExpressionRole {
                 name: "membershipRequestState"
                 expression: {
                     var memberStates = usersModelWithMembershipState.membershipStatePerView[membersTabPanelPage.panelType]
                     return memberStates[model.index % (memberStates.length)]
                 }
+                expectedRoles: ["index"]
             },
-            ExpressionRole {
+            ConstantRole {
                 name: "requestToJoinLoading"
-                expression: false
+                value: false
+            },
+            FastExpressionRole {
+                function displayNameProxy(localNickname, ensName, displayName, aliasName) {
+                    return ProfileUtils.displayName(localNickname, ensName, displayName, aliasName)
+                }
+
+                name: "preferredDisplayName"
+                expectedRoles: ["localNickname", "displayName", "ensName", "alias"]
+                expression: displayNameProxy(model.localNickname, model.ensName, model.displayName, model.alias)
             }
         ]
     }
@@ -125,9 +140,7 @@ SplitView {
         logsView.logText: logs.logText
 
         ColumnLayout {
-            anchors.top: parent.top
+            Layout.fillWidth: true
-            anchors.left: parent.left
-            anchors.right: parent.right
             Label {
                 text: "View state"
             }

ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml

@@ -170,6 +170,13 @@ ItemDelegate {
     background: Rectangle {
         color: root.color
         radius: 8
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: root.enabled && root.hoverEnabled && root.hovered ? Qt.PointingHandCursor : undefined
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            onClicked: root.clicked(mouse)
+        }
     }
 
     contentItem: RowLayout {
@@ -268,13 +275,6 @@ ItemDelegate {
         }
     }
 
-    MouseArea {
-        anchors.fill: parent
-        cursorShape: root.enabled && root.hoverEnabled && root.hovered ? Qt.PointingHandCursor : undefined
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: root.clicked(mouse)
-    }
-
     Component {
         id: statusContactVerificationIcons
         StatusContactVerificationIcons {

ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
 
 import StatusQ 0.1
 import StatusQ.Core 0.1
@@ -68,7 +68,6 @@ Item {
             Layout.fillHeight: true
 
             model: SortFilterProxyModel {
-
                 sourceModel: root.model
 
                 sorters : [
@@ -234,7 +233,7 @@ Item {
                         text: qsTr("View Messages")
                         visible: viewMessagesButtonVisible
                         size: StatusBaseButton.Size.Small
-                        onClicked: root.viewMemberMessagesClicked(model.pubKey, model.displayName)
+                        onClicked: root.viewMemberMessagesClicked(model.pubKey, memberItem.title)
                     },
 
                     StatusButton {