fix(chat): Update preview label issue

Fixes #16926

storybook/src/Models/PaymentRequestModel.qml

@@ -10,8 +10,8 @@ ListModel {
         chainId: 1 // main
     }
     ListElement {
-        symbol: "ETH"
-        amount: "12345.6789"
+        symbol: "ARBI"
+        amount: "12345.67892131231313213123445"
         address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
         chainId: 10 // Opti
     }

ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml

@@ -25,20 +25,18 @@ CalloutCard {
     borderColor: Theme.palette.directColor7
     backgroundColor: root.containsMouse ? Theme.palette.directColor7 : Theme.palette.background
 
-    contentItem: Item {
-        implicitHeight: layout.implicitHeight
-        implicitWidth: layout.implicitWidth
-
-        RowLayout {
-            id: layout
-            anchors.fill: parent
-            spacing: 16
+    contentItem: GridLayout {
+        rowSpacing: 0
+        columnSpacing: Theme.halfPadding
+        columns: 4
+        rows: 3
 
         StatusRoundIcon {
             id: favIcon
             Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             Layout.preferredWidth: 36
             Layout.preferredHeight: 36
+            Layout.rowSpan: 3
             asset.width: 24
             asset.height: 24
             asset.bgColor: Theme.palette.directColor7
@@ -60,23 +58,45 @@ CalloutCard {
             }
         }
 
-            ColumnLayout {
-                Layout.fillWidth: true
+        Item {
             Layout.fillHeight: true
+            Layout.preferredWidth: Theme.halfPadding / 2
+            Layout.rowSpan: 3
+        }
+
+        Item {
+            // NOTE this item is added because for some reason the "Payment request" text is not rendered until hover
+            Layout.preferredHeight: 1
+            Layout.fillWidth: true
+        }
+
+        StatusFlatButton {
+            id: closeButton
+            Layout.rowSpan: 3
+            icon.name: "close"
+            size: StatusBaseButton.Size.Small
+            hoverColor: Theme.palette.directColor8
+            textColor: Theme.palette.directColor1
+            onClicked: root.close()
+        }
 
         StatusBaseText {
             Layout.fillWidth: true
-                    Layout.fillHeight: true
             text: qsTr("Payment request")
             font.pixelSize: Theme.additionalTextSize
             font.weight: Font.Medium
         }
-                RowLayout {
+
+        Item {
             Layout.fillWidth: true
             Layout.fillHeight: true
+            Layout.topMargin: Theme.halfPadding / 2
             StatusBaseText {
-                        Layout.maximumWidth: parent.width * 0.8
-                        Layout.fillHeight: true
+                id: amountText
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.rightMargin: symbolText.paintedWidth
                 font.pixelSize: Theme.tertiaryTextFontSize
                 color: Theme.palette.baseColor1
                 verticalAlignment: Text.AlignVCenter
@@ -84,7 +104,10 @@ CalloutCard {
                 text: root.amount
             }
             StatusBaseText {
-                        Layout.fillHeight: true
+                id: symbolText
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: amountText.paintedWidth + Theme.halfPadding
                 font.pixelSize: Theme.tertiaryTextFontSize
                 color: Theme.palette.baseColor1
                 verticalAlignment: Text.AlignVCenter
@@ -93,17 +116,6 @@ CalloutCard {
         }
     }
 
-            StatusFlatButton {
-                id: closeButton
-                icon.name: "close"
-                size: StatusBaseButton.Size.Small
-                hoverColor: Theme.palette.directColor8
-                textColor: Theme.palette.directColor1
-                onClicked: root.close()
-            }
-        }
-    }
-
     HoverHandler {
         id: mouseArea
         target: background