Make edit account UI more scalable

Put content in flickable, reduce avatar height as needed.
The minimum supported resolution of the app should now be 240x120.

src/qml/Pages/EditAccount/EditAccount.qml

@@ -9,11 +9,8 @@ import "../../utils.js" as Utils
 
 Page {
     id: editAccount
-    padding: currentSpacing < 8 ? 0 : currentSpacing
-    Behavior on padding { HNumberAnimation {} }
 
     property bool wide: width > 414 + padding * 2
-    property int thinMaxWidth: 240
     property int normalSpacing: 8
     property int currentSpacing:
         Math.min(normalSpacing * width / 400, normalSpacing * 2)
@@ -47,35 +44,48 @@ Page {
 
     background: null
 
-    HColumnLayout {
+    padding: currentSpacing < 8 ? 0 : currentSpacing
+    Behavior on padding { HNumberAnimation {} }
+
+    Flickable {
+        id: flickable
         anchors.fill: parent
-        spacing: 16
+        clip: true
+        contentWidth: parent.width
+        contentHeight: boxColumn.childrenRect.height
 
-        HRectangle {
+        HColumnLayout {
-            color: theme.box.background
+            id: boxColumn
-            // radius: theme.box.radius
+            spacing: 16
+            width: flickable.width
+            height: flickable.height
 
-            Layout.alignment: Qt.AlignCenter
+            HRectangle {
+                color: theme.box.background
+                // radius: theme.box.radius
 
-            Layout.preferredWidth: wide ? parent.width : thinMaxWidth
+                Layout.alignment: Qt.AlignCenter
-            Layout.maximumWidth: Math.min(parent.width, 640)
 
-            Layout.preferredHeight: childrenRect.height
+                Layout.maximumWidth: Math.min(parent.width, 640)
-            Layout.maximumHeight: parent.height
+                Layout.preferredWidth:
+                    wide ? parent.width : theme.minimumSupportedWidth
 
-            Profile { width: parent.width }
+                Layout.preferredHeight: childrenRect.height
+
+                Profile { width: parent.width }
+            }
+
+            // HRectangle {
+                // color: theme.box.background
+                // radius: theme.box.radius
+                // ClientSettings { width: parent.width }
+            // }
+
+            // HRectangle {
+                // color: theme.box.background
+                // radius: theme.box.radius
+                // Devices { width: parent.width }
+            // }
         }
-
-        // HRectangle {
-            // color: theme.box.background
-            // radius: theme.box.radius
-            // ClientSettings { width: parent.width }
-        // }
-
-        // HRectangle {
-            // color: theme.box.background
-            // radius: theme.box.radius
-            // Devices { width: parent.width }
-        // }
     }
 }

src/qml/Pages/EditAccount/Profile.qml

@@ -47,9 +47,9 @@ HGridLayout {
         toolTipImageUrl: null
 
         Layout.alignment: Qt.AlignHCenter
-        Layout.topMargin: wide ? 0 : currentSpacing
 
-        Layout.preferredWidth: thinMaxWidth
+        Layout.preferredWidth:
+            Math.min(flickable.height, theme.minimumSupportedWidth)
         Layout.preferredHeight: Layout.preferredWidth
 
         HFileDialogOpener {

src/qml/Theme.qml

@@ -8,6 +8,9 @@ QtObject {
 
     property int animationDuration: 100
 
+    property int minimumSupportedWidth: 240
+    property int minimumSupportedHeight: 120
+
     property QtObject fontSize: QtObject {
         property int smallest: 6
         property int smaller: 8

src/qml/Window.qml

@@ -8,11 +8,13 @@ import "Models"
 
 ApplicationWindow {
     id: window
+    minimumWidth: theme.minimumSupportedWidth
+    minimumHeight: theme.minimumSupportedHeight
     width: 640
     height: 480
     visible: true
-    color: "black"
     title: "Harmony QML"
+    color: "black"
 
     property bool debug: false
     property bool ready: false