fix(desktop): Move Input anchors binding to client code

ui/app/AppLayouts/Browser/popups/JSDialogWindow.qml

@@ -53,8 +53,9 @@ ModalPopup {
         id: prompt
         text: ""
         visible: false
-        Layout.fillWidth: true
         anchors.top: svMessage.bottom
+        anchors.right: parent.right
+        anchors.left: parent.left
     }
 
     footer: Item {

ui/app/AppLayouts/Onboarding/popups/KeycardCreatePINModal.qml

@@ -35,7 +35,9 @@ StatusModal {
     contentItem: Item {
         Input {
             id: firstPINField
+            anchors.right: parent.right
             anchors.rightMargin: 56
+            anchors.left: parent.left
             anchors.leftMargin: 56
             anchors.top: parent.top
             anchors.topMargin: 88

ui/app/AppLayouts/Onboarding/shared/CreatePasswordModal.qml

@@ -34,6 +34,8 @@ ModalPopup {
 
     Input {
         id: firstPasswordField
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.rightMargin: 56
         anchors.leftMargin: 56
         anchors.top: parent.top

ui/app/AppLayouts/Onboarding/views/LoginView.qml

@@ -880,4 +880,4 @@ Item {
             }
         }
     ]
-}
+}

ui/app/AppLayouts/Profile/popups/AddShowTokenModal.qml

@@ -97,6 +97,8 @@ StatusModal {
         anchors.rightMargin: Style.current.padding
         Input {
             id: addressInput
+            anchors.left: parent.left
+            anchors.right: parent.right
             readOnly: !editable
             textField.maximumLength: 42
             placeholderText: qsTr("Enter contract address...")
@@ -107,9 +109,11 @@ StatusModal {
 
         Input {
             id: nameInput
-            readOnly: !editable
+            anchors.left: parent.left
+            anchors.right: parent.right
             anchors.top: addressInput.bottom
             anchors.topMargin: marginBetweenInputs
+            readOnly: !editable
             placeholderText: qsTr("The name of your token...")
             label: qsTr("Name")
         }

ui/app/AppLayouts/Profile/views/DevicesView.qml

@@ -44,9 +44,11 @@ SettingsContentBase {
 
             Input {
                 id: deviceNameTxt
-                placeholderText: qsTr("Specify a name")
+                anchors.left: parent.left
+                anchors.right: parent.right
                 anchors.top: deviceNameLbl.bottom
                 anchors.topMargin: Style.current.padding
+                placeholderText: qsTr("Specify a name")
             }
 
             // TODO: replace with StatusQ component

ui/app/AppLayouts/Profile/views/EnsSearchView.qml

@@ -138,6 +138,7 @@ Item {
         Input {
             id: ensUsername
             placeholderText: !isStatus ? "vitalik94.domain.eth" : "vitalik94"
+            anchors.left: parent.left
             anchors.top: circleAt.bottom
             anchors.topMargin: Style.current.bigPadding
             anchors.right: btnContinue.left

ui/imports/shared/controls/ContactsListAndSearch.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.13
+import QtQuick 2.14
-import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.4
-import QtGraphicalEffects 1.13
+import QtGraphicalEffects 1.14
 
 import utils 1.0
 import shared.stores 1.0
@@ -15,8 +15,6 @@ import "."
 
 Item {
     id: root
-    height: (chatKey.height + message.height + existingContacts.height
-            + searchResults.height + noContactsRect.height + 24)
 
     property var rootStore
     property var contactsStore
@@ -34,14 +32,12 @@ Item {
     property bool showCheckbox: false
     property bool showContactList: true
     property bool showSearch: true
-    signal userClicked(string pubKey, bool isAddedContact, string name, string address)
     property var pubKeys: ([])
     property bool hideCommunityMembers: false
     property bool addContactEnabled: true
     property string wrongInputValidationError: qsTr("Enter a valid chat key or ENS username");
 
-
+    readonly property var resolveENS: Backpressure.debounce(root, 500, function (ensName) {
-    property var resolveENS: Backpressure.debounce(root, 500, function (ensName) {
         noContactsRect.visible = false
         searchResults.loading = true
         searchResults.showProfileNotFoundMessage = false
@@ -61,174 +57,176 @@ Item {
         return root.validationError === "";
     }
 
-    Input {
+    signal userClicked(string pubKey, bool isAddedContact, string name, string address)
-        id: chatKey
-        property bool hasValidSearchResult: false
-        height: visible ? implicitHeight : 0
-        placeholderText: qsTr("Enter ENS username or chat key")
-        visible: showSearch
-        Keys.onReleased: {
-            successMessage = "";
-            searchResults.pubKey = "";
-            root.validationError = "";
-            searchResults.showProfileNotFoundMessage = false;
-            if (chatKey.text !== "") {
-                if (!validate()) {
-                    noContactsRect.visible = false;
-                    return;
-                }
 
-                chatKey.text = chatKey.text.trim();
+    implicitWidth: column.implicitWidth
+    implicitHeight: column.implicitHeight
 
-                if (Utils.isChatKey(chatKey.text)) {
+    ColumnLayout {
-                    pubKey = chatKey.text;
+        id: column
-                    let contactDetails = Utils.getContactDetailsAsJson(pubKey)
+        anchors.fill: parent
-                    if (!contactDetails.isContact) {
+        spacing: Style.current.smallPadding
-                        searchResults.username = contactDetails.alias
-                        searchResults.userAlias = Utils.compactAddress(pubKey, 4);
-                        searchResults.pubKey = pubKey
-                    }
-                    noContactsRect.visible = false;
-                    return;
-                }
 
-                chatKey.hasValidSearchResult = false
+        Input {
-                Qt.callLater(resolveENS, chatKey.text);
+            id: chatKey
-            } else {
+
+            property bool hasValidSearchResult: false
+
+            placeholderText: qsTr("Enter ENS username or chat key")
+            visible: showSearch
+            textField.anchors.rightMargin: clearBtn.width + Style.current.padding + 2
+
+            Layout.fillWidth: true
+            Layout.preferredHeight: visible ? implicitHeight : 0
+            Keys.onReleased: {
+                successMessage = "";
+                searchResults.pubKey = "";
                 root.validationError = "";
-            }
-        }
-        textField.anchors.rightMargin: clearBtn.width + Style.current.padding + 2
-
-        Connections {
-            target: mainModule
-            onResolvedENS: {
-                chatKey.hasValidSearchResult = false
-                if (chatKey.text == "") {
-                    ensUsername.text = "";
-                    pubKey = "";
-                } else if(resolvedPubKey == ""){
-                    ensUsername.text = "";
-                    searchResults.pubKey = pubKey = "";
-                    searchResults.address = "";
-                    searchResults.showProfileNotFoundMessage = root.showContactList
-                } else {
-                    if (userProfile.pubKey === resolvedPubKey) {
-                        root.validationError = qsTr("Can't chat with yourself");
-                    } else {
-                        chatKey.hasValidSearchResult = true
-                        searchResults.username = Utils.addStatusEns(chatKey.text.trim())
-                        let userAlias = globalUtils.generateAlias(resolvedPubKey)
-                        userAlias = userAlias.length > 20 ? userAlias.substring(0, 19) + "..." : userAlias
-                        searchResults.userAlias =  userAlias + " • " + Utils.compactAddress(resolvedPubKey, 4)
-                        searchResults.pubKey = pubKey = resolvedPubKey;
-                        searchResults.address = resolvedAddress;
-                    }
-                    searchResults.showProfileNotFoundMessage = false
-                }
-                searchResults.loading = false;
-                noContactsRect.visible = pubKey === ""  &&
-                        ensUsername.text === "" &&
-                        root.contactsStore.myContactsModel.count === 0 &&
-                        !profileNotFoundMessage.visible
-            }
-        }
-
-        StatusFlatRoundButton {
-            id: clearBtn
-            width: 20
-            height: 20
-            anchors.right: parent.right
-            anchors.rightMargin: Style.current.padding
-            anchors.verticalCenter: parent.verticalCenter
-            icon.name: "clear"
-            visible: chatKey.text !== "" && !chatKey.readOnly
-            icon.width: 20
-            icon.height: 20
-            type: StatusFlatRoundButton.Type.Tertiary
-            color: "transparent"
-            onClicked: {
-                chatKey.text = "";
-                chatKey.forceActiveFocus(Qt.MouseFocusReason);
                 searchResults.showProfileNotFoundMessage = false;
-                searchResults.pubKey = pubKey = "";
+                if (chatKey.text !== "") {
-                noContactsRect.visible = false;
+                    if (!validate()) {
-                searchResults.loading = false;
+                        noContactsRect.visible = false;
-                root.validationError = "";
+                        return;
+                    }
+
+                    chatKey.text = chatKey.text.trim();
+
+                    if (Utils.isChatKey(chatKey.text)) {
+                        pubKey = chatKey.text;
+                        let contactDetails = Utils.getContactDetailsAsJson(pubKey);
+                        if (!contactDetails.isContact) {
+                            searchResults.username = contactDetails.alias;
+                            searchResults.userAlias = Utils.compactAddress(pubKey, 4);
+                            searchResults.pubKey = pubKey;
+                        }
+                        noContactsRect.visible = false;
+                        return;
+                    }
+
+                    chatKey.hasValidSearchResult = false
+                    Qt.callLater(resolveENS, chatKey.text);
+                } else {
+                    root.validationError = "";
+                }
+            }
+
+            Connections {
+                target: mainModule
+                onResolvedENS: {
+                    chatKey.hasValidSearchResult = false
+                    if (chatKey.text == "") {
+                        ensUsername.text = "";
+                        pubKey = "";
+                    } else if(resolvedPubKey == ""){
+                        ensUsername.text = "";
+                        searchResults.pubKey = pubKey = "";
+                        searchResults.address = "";
+                        searchResults.showProfileNotFoundMessage = root.showContactList
+                    } else {
+                        if (userProfile.pubKey === resolvedPubKey) {
+                            root.validationError = qsTr("Can't chat with yourself");
+                        } else {
+                            chatKey.hasValidSearchResult = true
+                            searchResults.username = Utils.addStatusEns(chatKey.text.trim())
+                            let userAlias = globalUtils.generateAlias(resolvedPubKey)
+                            userAlias = userAlias.length > 20 ? userAlias.substring(0, 19) + "..." : userAlias
+                            searchResults.userAlias =  userAlias + " • " + Utils.compactAddress(resolvedPubKey, 4)
+                            searchResults.pubKey = pubKey = resolvedPubKey;
+                            searchResults.address = resolvedAddress;
+                        }
+                        searchResults.showProfileNotFoundMessage = false
+                    }
+                    searchResults.loading = false;
+                    noContactsRect.visible = pubKey === ""  &&
+                            ensUsername.text === "" &&
+                            root.contactsStore.myContactsModel.count === 0 &&
+                            !profileNotFoundMessage.visible
+                }
+            }
+
+            StatusFlatRoundButton {
+                id: clearBtn
+                width: 20
+                height: 20
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.padding
+                anchors.verticalCenter: parent.verticalCenter
+                icon.name: "clear"
+                visible: chatKey.text !== "" && !chatKey.readOnly
+                icon.width: 20
+                icon.height: 20
+                type: StatusFlatRoundButton.Type.Tertiary
+                color: "transparent"
+                onClicked: {
+                    chatKey.text = "";
+                    chatKey.forceActiveFocus(Qt.MouseFocusReason);
+                    searchResults.showProfileNotFoundMessage = false;
+                    searchResults.pubKey = pubKey = "";
+                    noContactsRect.visible = false;
+                    searchResults.loading = false;
+                    root.validationError = "";
+                    chatKey.hasValidSearchResult = false
+                }
+            }
+        }
+
+        StyledText {
+            id: message
+            text: root.validationError || successMessage
+            visible: root.validationError !== "" || successMessage !== ""
+            font.pixelSize: 13
+            color: !!root.validationError ? Style.current.danger : Style.current.success
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredHeight: visible ? contentHeight : 0
+        }
+
+        ExistingContacts {
+            id: existingContacts
+
+            contactsStore: root.contactsStore
+            community: root.community
+            visible: showContactList
+            hideCommunityMembers: root.hideCommunityMembers
+            showCheckbox: root.showCheckbox
+            filterText: chatKey.text
+            pubKeys: root.pubKeys
+            onContactClicked: function (contact) {
+                if (!contact || typeof contact === "string") {
+                    return
+                }
+                const index = root.pubKeys.indexOf(contact.pubKey)
+                const pubKeysCopy = Object.assign([], root.pubKeys)
+                if (index === -1) {
+                    pubKeysCopy.push(contact.pubKey)
+                } else {
+                    pubKeysCopy.splice(index, 1)
+                }
+                root.pubKeys = pubKeysCopy
+
                 chatKey.hasValidSearchResult = false
+                userClicked(contact.pubKey, contact.isContact, contact.alias, contact.address)
+            }
+            expanded: !searchResults.loading && pubKey === "" && !searchResults.showProfileNotFoundMessage
+            Layout.fillWidth: true
+        }
+
+        SearchResults {
+            id: searchResults
+            hasExistingContacts: existingContacts.visible
+            loading: false
+            addContactEnabled: root.addContactEnabled
+            onResultClicked: {
+                chatKey.hasValidSearchResult = false
+                userClicked(pubKey, isAddedContact, username, searchResults.address)
+                if (!validate()) {
+                    return
+                }
+            }
+            onAddToContactsButtonClicked: {
+                root.contactsStore.addContact(pubKey)
             }
         }
-    }
+        Layout.fillWidth: true
-
-    StyledText {
-        id: message
-        text: root.validationError || successMessage
-        visible: root.validationError !== "" || successMessage !== ""
-        height: visible ? contentHeight : 0
-        font.pixelSize: 13
-        color: !!root.validationError ? Style.current.danger : Style.current.success
-        anchors.top: chatKey.bottom
-        anchors.topMargin: Style.current.smallPadding
-        anchors.horizontalCenter: parent.horizontalCenter
-    }
-
-    ExistingContacts {
-        id: existingContacts
-
-        contactsStore: root.contactsStore
-        community: root.community
-        visible: showContactList
-        hideCommunityMembers: root.hideCommunityMembers
-        anchors.topMargin: this.height > 0 ? Style.current.halfPadding : 0
-        anchors.top: {
-            if (message.visible) {
-                return message.bottom
-            }
-            if (chatKey.visible) {
-                return chatKey.bottom
-            }
-        }
-        showCheckbox: root.showCheckbox
-        filterText: chatKey.text
-        pubKeys: root.pubKeys
-        onContactClicked: function (contact) {
-            if (!contact || typeof contact === "string") {
-                return
-            }
-            const index = root.pubKeys.indexOf(contact.pubKey)
-            const pubKeysCopy = Object.assign([], root.pubKeys)
-            if (index === -1) {
-                pubKeysCopy.push(contact.pubKey)
-            } else {
-                pubKeysCopy.splice(index, 1)
-            }
-            root.pubKeys = pubKeysCopy
-
-            chatKey.hasValidSearchResult = false
-            userClicked(contact.pubKey, contact.isContact, contact.alias, contact.address)
-        }
-        expanded: !searchResults.loading && pubKey === "" && !searchResults.showProfileNotFoundMessage
-    }
-
-    SearchResults {
-        id: searchResults
-        anchors.top: existingContacts.visible ? existingContacts.bottom :
-                                                message.visible? message.bottom : chatKey.bottom
-        anchors.topMargin: Style.current.halfPadding
-        hasExistingContacts: existingContacts.visible
-        loading: false
-        width: searchResultsWidth > 0 ? searchResultsWidth : parent.width
-        addContactEnabled: root.addContactEnabled
-        onResultClicked: {
-            chatKey.hasValidSearchResult = false
-            userClicked(pubKey, isAddedContact, username, searchResults.address)
-            if (!validate()) {
-                return
-            }
-        }
-        onAddToContactsButtonClicked: {
-            root.contactsStore.addContact(pubKey)
-        }
     }
 
     NoFriendsRectangle {

ui/imports/shared/controls/GasSelector.qml

@@ -334,7 +334,6 @@ Item {
             anchors.top: parent.top
             anchors.right: inputGasPrice.left
             anchors.rightMargin: Style.current.padding
-            anchors.left: undefined
             visible: root.suggestedFees.eip1559Enabled
             width: 125
             customHeight: 56
@@ -364,7 +363,6 @@ Item {
             label: qsTr("Per-gas overall limit")
             inputLabel.color: Style.current.secondaryText
             anchors.top: parent.top
-            anchors.left: undefined
             anchors.right: parent.right
             width: 125
             customHeight: 56

ui/imports/shared/views/ExistingContacts.qml

@@ -12,9 +12,6 @@ import AppLayouts.Chat.controls 1.0
 
 Item {
     id: root
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: visible ? Math.min(contactListView.contentHeight, (expanded ? 320 : 192)) : 0
 
     property var contactsStore
     property var community
@@ -24,6 +21,7 @@ Item {
     property bool showCheckbox: false
     property bool hideCommunityMembers: false
     property var pubKeys: ([])
+
     signal contactClicked(var contact)
 
     function matchesAlias(name, filter) {
@@ -31,6 +29,9 @@ Item {
         return parts.some(p => p.startsWith(filter))
     }
 
+    implicitWidth: contactListView.implicitWidth
+    implicitHeight: visible ? Math.min(contactListView.contentHeight, (expanded ? 320 : 192)) : 0
+
     StatusListView {
         id: contactListView
         anchors.fill: parent
@@ -38,6 +39,7 @@ Item {
 
         model: root.contactsStore.myContactsModel
         delegate: Contact {
+            width: contactListView.availableWidth
             showCheckbox: root.showCheckbox
             isChecked: root.pubKeys.indexOf(model.pubKey) > -1
             pubKey: model.pubKey
@@ -47,20 +49,18 @@ Item {
             image: model.icon
             isVisible: {
                 return model.isContact && !model.isBlocked && (root.filterText === "" ||
-                root.matchesAlias(model.alias.toLowerCase(), root.filterText.toLowerCase()) ||
+                    root.matchesAlias(model.alias.toLowerCase(), root.filterText.toLowerCase()) ||
-                model.displayName.toLowerCase().includes(root.filterText.toLowerCase()) ||
+                    model.displayName.toLowerCase().includes(root.filterText.toLowerCase()) ||
-                model.ensName.toLowerCase().includes(root.filterText.toLowerCase()) ||
+                    model.ensName.toLowerCase().includes(root.filterText.toLowerCase()) ||
-                model.localNickname.toLowerCase().includes(root.filterText.toLowerCase()) ||
+                    model.localNickname.toLowerCase().includes(root.filterText.toLowerCase()) ||
-                model.pubKey.toLowerCase().includes(root.filterText.toLowerCase())) &&
+                    model.pubKey.toLowerCase().includes(root.filterText.toLowerCase())) &&
-                (!root.hideCommunityMembers ||
+                    (!root.hideCommunityMembers ||
-                !root.community.hasMember(model.pubKey))
+                    !root.community.hasMember(model.pubKey));
             }
             onContactClicked: function () {
-                root.contactClicked(model)
+                root.contactClicked(model);
             }
         }
-
-        ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
     }
 }
 

ui/imports/shared/views/TransactionSigner.qml

@@ -96,6 +96,8 @@ Item {
 
     Input {
         id: txtPassword
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.top: signingPhrase.bottom
         anchors.topMargin: Style.current.bigPadding
         textField.objectName: "transactionSignerPasswordInput"