Fix visibility of multiple sections in DeviceList.

The itemHeight on trustedDevices ColumnView is set as Theme.itemSizeMedium, and the whole height is calculated as (device count)×itemHeight. However, this does not include the height of the section headers, causing the second section not be shown.

Add extra space to fit the section headers (and try to scale this based on the available device count). Tested with 3 devices in different sections, and everything worked quite ok. Reserving the actual space needed by headers would be even better, but I didn't yet find a way to this.

Additionally, use "section" as the sortrole instead of "name" to avoid having multiple instances of same section headers. Sorting first by section and then by name would be even better, but would need some work on the C++ side of the models, it seems.

app/qml/pages/DeviceListPage.qml

@@ -209,7 +209,7 @@ Page {
             SortFilterModel {
                 id: trustedDevicesModel
 
-                sortRole: "name"
+                sortRole: "section"
                 sourceModel: devicelistModel
             }
 
@@ -224,7 +224,7 @@ Page {
             ColumnView {
                 id: trustedDevices
                 width: page.width
-                itemHeight: Theme.itemSizeMedium
+                itemHeight: Theme.itemSizeMedium + (3 * Theme.itemSizeSmall / trustedDevices.count)
 
 
                 model: trustedDevicesModel