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,9 +44,21 @@ Page {
 
     background: null
 
-    HColumnLayout {
+    padding: currentSpacing < 8 ? 0 : currentSpacing
+    Behavior on padding { HNumberAnimation {} }
+
+    Flickable {
+        id: flickable
         anchors.fill: parent
+        clip: true
+        contentWidth: parent.width
+        contentHeight: boxColumn.childrenRect.height
+
+        HColumnLayout {
+            id: boxColumn
             spacing: 16
+            width: flickable.width
+            height: flickable.height
 
             HRectangle {
                 color: theme.box.background
@@ -57,11 +66,11 @@ Page {
 
                 Layout.alignment: Qt.AlignCenter
 
-            Layout.preferredWidth: wide ? parent.width : thinMaxWidth
                 Layout.maximumWidth: Math.min(parent.width, 640)
+                Layout.preferredWidth:
+                    wide ? parent.width : theme.minimumSupportedWidth
 
                 Layout.preferredHeight: childrenRect.height
-            Layout.maximumHeight: parent.height
 
                 Profile { width: parent.width }
             }
@@ -78,4 +87,5 @@ Page {
                 // 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