Refine mobileform settings

Numerous refinements to the new mobileform setting pages 
- Ensure left and right padding at the top level is 0 for mobile
- Centre align the avatar in the account editor page and add tooltip to button
- Fix the bubble/compact mode setting so that it fits when thin, i.e on mobile
- Fix the loading placeholder in device settings

src/qml/Settings/AccountEditorPage.qml

@@ -18,6 +18,8 @@ Kirigami.ScrollablePage {
 
     readonly property bool compact: width > Kirigami.Units.gridUnit * 30 ? 2 : 1
 
+    leftPadding: 0
+    rightPadding: 0
     ColumnLayout {
         MobileForm.FormCard {
             Layout.topMargin: Kirigami.Units.largeSpacing
@@ -29,9 +31,14 @@ Kirigami.ScrollablePage {
                 }
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
+                    background: Item {}
                     contentItem: RowLayout {
+                        Item {
+                            Layout.fillWidth: true
+                        }
                         Kirigami.Avatar {
                             id: avatar
+                            Layout.alignment: Qt.AlignRight
                             source: root.connection && root.connection.localUser.avatarMediaId ? ("image://mxc/" + root.connection.localUser.avatarMediaId) : ""
                             name: root.connection.localUser.displayName ?? root.connection.localUser.id
 
@@ -60,10 +67,16 @@ Kirigami.ScrollablePage {
                             }
                         }
                         QQC2.Button {
+                            Layout.alignment: Qt.AlignLeft
                             visible: avatar.source.toString().length !== 0
                             icon.name: "edit-clear"
+                            text: i18n("Remove current avatar")
+                            display: QQC2.AbstractButton.IconOnly
 
                             onClicked: avatar.source = ""
+
+                            QQC2.ToolTip.text: text
+                            QQC2.ToolTip.visible: hovered
                         }
                         Item {
                             Layout.fillWidth: true

src/qml/Settings/AppearanceSettingsPage.qml

@@ -26,13 +26,18 @@ Kirigami.ScrollablePage {
                 }
 
                 MobileForm.AbstractFormDelegate {
+                    id: timelineModeSetting
                     Layout.fillWidth: true
                     background: Item {}
                     contentItem: RowLayout {
                         Layout.alignment: Qt.AlignCenter
-                        spacing: Kirigami.Units.gridUnit * 2
+                        spacing: Kirigami.Units.largeSpacing
+                        Item {
+                            Layout.fillWidth: true
+                        }
                         QQC2.ButtonGroup { id: themeGroup }
                         ThemeRadioButton {
+                            thin: timelineModeSetting.width < Kirigami.Units.gridUnit * 22
                             innerObject: [
                                 RowLayout {
                                     Layout.fillWidth: true
@@ -121,7 +126,8 @@ Kirigami.ScrollablePage {
                             }
                         }
                         ThemeRadioButton {
-                            Layout.alignment: Qt.AlignRight
+                            // Layout.alignment: Qt.AlignRight
+                            thin: timelineModeSetting.width < Kirigami.Units.gridUnit * 22
                             innerObject: [
                                 RowLayout {
                                     Layout.fillWidth: true
@@ -188,6 +194,9 @@ Kirigami.ScrollablePage {
                                 Config.save();
                             }
                         }
+                        Item {
+                            Layout.fillWidth: true
+                        }
                     }
                 }
             }

src/qml/Settings/DevicesPage.qml

@@ -25,12 +25,13 @@ Kirigami.ScrollablePage {
                 MobileForm.FormCardHeader {
                     title: i18n("Devices")
                 }
-
+                MobileForm.AbstractFormDelegate {
-                Kirigami.LoadingPlaceholder {
+                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignHCenter
+                    visible: deviceRepeater.count === 0 // We can assume 0 means loading since there is at least one device
-                    visible: parent.count === 0 // We can assume 0 means loading since there is at least one device
+                    contentItem: Kirigami.LoadingPlaceholder { }
                 }
                 Repeater {
+                    id: deviceRepeater
                     model: DevicesModel {
                         id: devices
                     }

src/qml/Settings/GlobalNotificationsPage.qml

@@ -12,6 +12,8 @@ import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18nc("@title:window", "Notifications")
+    leftPadding: 0
+    rightPadding: 0
     ColumnLayout {
         id: notificationLayout
 

src/qml/Settings/NetworkProxyPage.qml

@@ -15,6 +15,8 @@ Kirigami.ScrollablePage {
     property int currentType
     property bool proxyConfigChanged: false
 
+    leftPadding: 0
+    rightPadding: 0
     ColumnLayout {
         MobileForm.FormCard {
             Layout.topMargin: Kirigami.Units.largeSpacing

src/qml/Settings/ThemeRadioButton.qml

@@ -15,11 +15,12 @@ QQC2.RadioButton {
     implicitHeight: contentItem.implicitHeight
 
     property alias innerObject: contentLayout.children
+    property bool thin
 
     contentItem: ColumnLayout {
         Kirigami.ShadowedRectangle {
             implicitWidth: implicitHeight * 1.6
-            implicitHeight: Kirigami.Units.gridUnit * 6
+            implicitHeight: delegate.thin ? Kirigami.Units.gridUnit * 5 : Kirigami.Units.gridUnit * 6
             radius: Kirigami.Units.smallSpacing
             Kirigami.Theme.inherit: false
             Kirigami.Theme.colorSet: Kirigami.Theme.View