fix(wallet): some of SendModal's broken windows

- fix high level mixed and broken sizing due to missing a consistent
layouting strategy
- fix first selection. The floating header was covering and tried to
force StatusListView to account for it but nothing I tried worked
    - moved header outside the StatisListView (a good example of control
    want to to be doing too many things)
- fixed background color of the TokenListView
- fix tags occluding selection of token

Closes: #9282

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -326,15 +326,14 @@ Rectangle {
                 implicitHeight: visible ? 22 : 0
             }
 
-            ScrollView {
+            Flickable {
                 visible: tagsRepeater.count > 0
                 anchors.top: statusListItemTertiaryTitle.bottom
                 anchors.topMargin: visible ? 8 : 0
-                width: parent.width
+                width: Math.min(statusListItemTagsSlotInline.width, parent.width)
-                height: visible ? contentHeight : 0
+                height: visible ? statusListItemTagsSlotInline.height : 0
                 clip: true
-
+                interactive: contentWidth > width
-                ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
                 Row {
                     id: statusListItemTagsSlotInline

ui/imports/shared/controls/TokenBalancePerChainDelegate.qml

@@ -25,7 +25,15 @@ StatusListItem {
     tagsModel: balances.count > 0 ? balances : []
     tagsDelegate: sensor.containsMouse ? expandedItem : compactItem
 
-    onClicked: tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
+    onClicked: d.selectToken()
+
+    QtObject {
+        id: d
+
+        function selectToken() {
+            root.tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
+        }
+    }
 
     Component {
         id: compactItem

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -75,7 +75,7 @@ Item {
         control.popup.width: 492
         control.popup.height: 416
         control.popup.x: -root.x
-        
+
         popupContentItemObjectName: "assetSelectorList"
 
         model : SortFilterProxyModel {

ui/imports/shared/popups/SendModal.qml

@@ -179,11 +179,13 @@ StatusDialog {
         clip: true
         ColumnLayout {
             id: group1
-            Layout.preferredWidth: parent.width
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
             Rectangle {
-                Layout.preferredWidth: parent.width
+                Layout.fillWidth: true
-                Layout.preferredHeight: assetAndAmmountSelector.height + Style.current.halfPadding
+                Layout.preferredHeight: assetAndAmountSelector.implicitHeight + Style.current.halfPadding
+
                 color: Theme.palette.baseColor3
                 z: 100
 
@@ -195,17 +197,17 @@ StatusDialog {
                     color: Theme.palette.dropShadow
                 }
 
-                Column {
+                ColumnLayout {
-                    id: assetAndAmmountSelector
+                    id: assetAndAmountSelector
-                    anchors.left: parent.left
+
-                    anchors.right: parent.right
+                    anchors.fill: parent
                     anchors.leftMargin: Style.current.xlPadding
                     anchors.rightMargin: Style.current.xlPadding
+
                     z: 1
                     spacing: 16
 
                     RowLayout {
-                        width: parent.width
                         spacing: 8
                         StatusBaseText {
                             id: modalHeader
@@ -262,7 +264,6 @@ StatusDialog {
                         }
                     }
                     RowLayout {
-                        width: parent.width
                         AmountToSend {
                             id: amountToSendInput
                             Layout.fillWidth:true
@@ -285,6 +286,10 @@ StatusDialog {
                             }
                             onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
                         }
+
+                        // Horizontal spacer
+                        RowLayout {}
+
                         AmountToReceive {
                             id: amountToReceive
                             Layout.alignment: Qt.AlignRight
@@ -304,8 +309,9 @@ StatusDialog {
                     }
                     TokenListView {
                         id: tokenListRect
-                        anchors.left: parent.left
+
-                        anchors.right: parent.right
+                        Layout.fillWidth: true
+
                         visible: !assetSelector.selectedAsset
                         assets: popup.selectedAccount && popup.selectedAccount.assets ? popup.selectedAccount.assets : []
                         searchTokenSymbolByAddressFn: function (address) {

ui/imports/shared/views/TokenListView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import QtQuick.Layouts 1.14
 
 import SortFilterProxyModel 0.2
 
@@ -11,7 +12,7 @@ import utils 1.0
 
 import "../controls"
 
-Rectangle {
+Item {
     id: root
 
     property var assets: []
@@ -29,43 +30,24 @@ Rectangle {
         })
     }
 
-    height: visible ? tokenList.height: 0
+    implicitWidth: contentLayout.implicitWidth
-    color: Theme.palette.indirectColor1
+    implicitHeight: contentLayout.implicitHeight
-    radius: 8
 
-    StatusListView {
+    ColumnLayout {
-        id: tokenList
+        id: contentLayout
-        anchors.horizontalCenter: parent.horizontalCenter
+
-        anchors.top: parent.top
+        anchors.fill: parent
-        width: parent.width
+
-        height: Math.min(433, tokenList.contentHeight)
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.preferredHeight: headerColumn.height
 
-        model: SortFilterProxyModel {
-            sourceModel: root.assets
-            filters: [
-                ExpressionFilter {
-                    expression: {
-                        var tokenSymbolByAddress = searchTokenSymbolByAddressFn(d.searchString)
-                        return visibleForNetwork && (
-                            symbol.startsWith(d.searchString.toUpperCase()) || name.toUpperCase().startsWith(d.searchString.toUpperCase()) || (tokenSymbolByAddress!=="" && symbol.startsWith(tokenSymbolByAddress))
-                        )
-                    }
-                }
-            ]
-        }
-        delegate: TokenBalancePerChainDelegate {
-            width: ListView.view.width
-            getNetworkIcon: root.getNetworkIcon
-            onTokenSelected: root.tokenSelected(selectedToken)
-        }
-        headerPositioning: ListView.OverlayHeader
-        header: Rectangle {
-            width: parent.width
-            height: childrenRect.height
             color: Theme.palette.indirectColor1
             radius: 8
-            z: 2
+
             Column {
+                id: headerColumn
+
                 width: parent.width
                 Item {
                     height: 5
@@ -90,5 +72,32 @@ Rectangle {
                 }
             }
         }
+
+        StatusListView {
+            id: tokenList
+
+            Layout.fillWidth: true
+            Layout.preferredHeight: 396
+
+            model: SortFilterProxyModel {
+                sourceModel: root.assets
+                filters: [
+                    ExpressionFilter {
+                        expression: {
+                            var tokenSymbolByAddress = searchTokenSymbolByAddressFn(d.searchString)
+                            tokenList.positionViewAtBeginning()
+                            return visibleForNetwork && (
+                                symbol.startsWith(d.searchString.toUpperCase()) || name.toUpperCase().startsWith(d.searchString.toUpperCase()) || (tokenSymbolByAddress!=="" && symbol.startsWith(tokenSymbolByAddress))
+                            )
+                        }
+                    }
+                ]
+            }
+            delegate: TokenBalancePerChainDelegate {
+                width: ListView.view.width
+                getNetworkIcon: root.getNetworkIcon
+                onTokenSelected: root.tokenSelected(selectedToken)
+            }
+        }
     }
 }