fix(savedaddresses): making add/edit saved address popup's content scrollable when there's no enough space for the content

ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml

@@ -11,7 +11,7 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
-import StatusQ.Popups.Dialog 0.1
+import StatusQ.Popups 0.1
 import StatusQ.Components 0.1
 
 import SortFilterProxyModel 0.2
@@ -22,7 +22,7 @@ import "../stores"
 import "../controls"
 import ".."
 
-StatusDialog {
+StatusModal {
     id: root
 
     property var allNetworks
@@ -30,13 +30,12 @@ StatusDialog {
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
     width: 477
-    topPadding: 24 // (16 + 8 for Name, until we add it to the StatusInput component)
-    bottomPadding: 28
 
-    header: StatusDialogHeader {
-        headline.title: d.editMode? qsTr("Edit saved address") : qsTr("Add new saved address")
-        headline.subtitle: d.editMode? d.name : ""
-        actions.closeButton.onClicked: root.close()
+    headerSettings.title: d.editMode? qsTr("Edit saved address") : qsTr("Add new saved address")
+    headerSettings.subTitle: d.editMode? d.name : ""
+
+    onClosed: {
+        root.close()
     }
 
     function initWithParams(params = {}) {
@@ -76,6 +75,8 @@ StatusDialog {
     QtObject {
         id: d
 
+        readonly property int componentWidth: 445
+
         property bool editMode: false
         property bool addAddress: false
         property alias name: nameInput.text
@@ -137,15 +138,25 @@ StatusDialog {
         });
     }
 
+    StatusScrollView {
+        id: scrollView
+
+        anchors.fill: parent
+        padding: 0
+        contentWidth: availableWidth
+
         Column {
-        width: parent.width
+            width: scrollView.availableWidth
             height: childrenRect.height
+            topPadding: 24 // (16 + 8 for Name, until we add it to the StatusInput component)
+            bottomPadding: 28
 
             spacing: Style.current.xlPadding
 
             StatusInput {
                 id: nameInput
-            implicitWidth: parent.width
+                implicitWidth: d.componentWidth
+                anchors.horizontalCenter: parent.horizontalCenter
                 charLimit: 24
                 input.edit.objectName: "savedAddressNameInput"
                 placeholderText: qsTr("Address name")
@@ -185,7 +196,8 @@ StatusDialog {
 
             StatusInput {
                 id: addressInput
-            implicitWidth: parent.width
+                implicitWidth: d.componentWidth
+                anchors.horizontalCenter: parent.horizontalCenter
                 label: qsTr("Address")
                 objectName: "savedAddressAddressInput"
                 input.edit.objectName: "savedAddressAddressInputEdit"
@@ -368,7 +380,8 @@ StatusDialog {
             StatusColorSelectorGrid {
                 id: colorSelection
                 objectName: "addSavedAddressColor"
-            width: parent.width
+                width: d.componentWidth
+                anchors.horizontalCenter: parent.horizontalCenter
                 model: Theme.palette.customisationColorsArray
                 title.color: Theme.palette.directColor1
                 title.font.pixelSize: Constants.addAccountPopup.labelFontSize1
@@ -384,7 +397,9 @@ StatusDialog {
                 id: networkSelector
                 objectName: "addSavedAddressNetworkSelector"
                 title: "Network preference"
-            implicitWidth: parent.width
+                implicitWidth: d.componentWidth
+                anchors.horizontalCenter: parent.horizontalCenter
+
                 enabled: addressInput.valid && !d.addressInputIsENS
                 defaultItemText: "Add networks"
                 defaultItemImageSource: "add"
@@ -434,6 +449,7 @@ StatusDialog {
                 }
             }
         }
+    }
 
     NetworkSelectPopup {
         id: networkSelectPopup
@@ -470,8 +486,7 @@ StatusDialog {
         dim: false
     }
 
-    footer: StatusDialogFooter {
-        rightButtons:  ObjectModel {
+    rightButtons: [
         StatusButton {
             text: d.editMode? qsTr("Save") : qsTr("Add address")
             enabled: d.valid && d.dirty && !d.resolvingEnsName
@@ -481,8 +496,7 @@ StatusDialog {
             }
             objectName: "addSavedAddress"
         }
-        }
-    }
+    ]
 
     CloneModel {
         id: allNetworksModelCopy