Move the device list into a separate scroll area

Scrolling the device list alongside all other user info is not
a very great UX, so I've fixed it.

resources/qml/dialogs/UserProfile.qml

@@ -31,24 +31,12 @@ ApplicationWindow {
         onActivated: userProfileDialog.close()
     }
 
-    ListView {
-        id: devicelist
-
-        property int selectedTab: 0
+    ColumnLayout {
+        id: contentL
 
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-        clip: true
-        spacing: 8
-        boundsBehavior: Flickable.StopAtBounds
         anchors.fill: parent
         anchors.margins: 10
-        footerPositioning: ListView.OverlayFooter
-
-        header: ColumnLayout {
-            id: contentL
 
-            width: devicelist.width
         spacing: Nheko.paddingMedium
 
         Avatar {
@@ -328,7 +316,19 @@ ApplicationWindow {
 
             Layout.bottomMargin: Nheko.paddingMedium
         }
-        }
+
+        ListView {
+            id: devicelist
+
+            property int selectedTab: 0
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            clip: true
+            spacing: 8
+            boundsBehavior: Flickable.StopAtBounds
+            footerPositioning: ListView.OverlayFooter
+            ScrollBar.vertical: ScrollBar {}
 
             model: (selectedTab == 0) ? devicesModel : sharedRoomsModel
 
@@ -519,10 +519,11 @@ ApplicationWindow {
                     }
                 }
             }
+        }
 
-        footer: DialogButtonBox {
+        DialogButtonBox {
             z: 2
-            width: devicelist.width
+            Layout.fillWidth: true
             alignment: Qt.AlignRight
             standardButtons: DialogButtonBox.Ok
             onAccepted: userProfileDialog.close()
@@ -533,7 +534,5 @@ ApplicationWindow {
             }
 
         }
-
     }
-
 }