Use new mobileform heading

Does what is says on the tin. Use the recently merged new `MobileForm.FormHeader` component in all settings pages.

src/qml/RoomSettings/General.qml

@@ -18,18 +18,19 @@ Kirigami.ScrollablePage {
     property NeoChatRoom room
 
     title: i18n("General")
-
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
-
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Room Information")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Room Information")
-                }
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
                     background: Item {}
@@ -165,13 +166,15 @@ Kirigami.ScrollablePage {
                 }
             }
         }
+
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Aliases")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Aliases")
-                }
                 MobileForm.FormTextDelegate {
                     visible: room.aliases.length <= 0
                     text: i18n("No canonical alias set")
@@ -263,13 +266,15 @@ Kirigami.ScrollablePage {
                 }
             }
         }
+
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("URL Previews")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("URL Previews")
-                }
                 MobileForm.FormCheckDelegate {
                     text: i18n("Enable URL previews by default for room members")
                     checked: room.defaultUrlPreviewState

src/qml/RoomSettings/Permissions.qml

@@ -17,7 +17,7 @@ Kirigami.ScrollablePage {
     property NeoChatRoom room
 
     title: i18nc('@title:window', 'Permissions')
-
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
 
@@ -31,13 +31,15 @@ Kirigami.ScrollablePage {
     }
 
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Privileged Users")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Privileged Users")
-                }
                 Repeater {
                     model: KSortFilterProxyModel {
                         sourceModel: userListModel
@@ -210,15 +212,17 @@ Kirigami.ScrollablePage {
                 }
             }
         }
+
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            visible: room.canSendState("m.room.power_levels")
+            title: i18n("Default permissions")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.largeSpacing
             visible: room.canSendState("m.room.power_levels")
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Default permissions")
-                }
                 MobileForm.FormComboBoxDelegate {
                     text: i18n("Default user power level")
                     description: i18n("This is power level for all new users when joining the room")
@@ -248,15 +252,17 @@ Kirigami.ScrollablePage {
                 }
             }
         }
+
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            visible: room.canSendState("m.room.power_levels")
+            title: i18n("Basic permissions")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.largeSpacing
             visible: room.canSendState("m.room.power_levels")
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Basic permissions")
-                }
                 MobileForm.FormComboBoxDelegate {
                     text: i18n("Invite users")
                     textRole: "text"
@@ -291,15 +297,17 @@ Kirigami.ScrollablePage {
                 }
             }
         }
+
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            visible: room.canSendState("m.room.power_levels")
+            title: i18n("Event permissions")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.largeSpacing
             visible: room.canSendState("m.room.power_levels")
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Event permissions")
-                }
                 MobileForm.FormComboBoxDelegate {
                     text: i18n("Change user permissions")
                     description: "m.room.power_levels"

src/qml/RoomSettings/PushNotification.qml

@@ -17,19 +17,19 @@ Kirigami.ScrollablePage {
     property NeoChatRoom room
 
     title: i18nc('@title:window', 'Notifications')
-
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
-
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Room notifications setting")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Room notifications setting")
-                }
                 MobileForm.FormRadioDelegate {
                     text: i18n("Follow global setting")
                     checked: room.pushNotificationState === PushNotificationState.Default

src/qml/RoomSettings/Security.qml

@@ -17,20 +17,20 @@ Kirigami.ScrollablePage {
     property string needUpgradeRoom: i18n("You need to upgrade this room to a newer version to enable this setting.")
 
     title: i18n("Security")
-
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
-
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18nc("@option:check", "Encryption")
+        }
         MobileForm.FormCard {
             visible: Controller.encryptionSupported
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18nc("@option:check", "Encryption")
-                }
                 MobileForm.FormSwitchDelegate {
                     id: enableEncryptionSwitch
                     text: i18n("Enable encryption")
@@ -45,14 +45,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18nc("@option:check", "Access")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18nc("@option:check", "Access")
-                }
                 MobileForm.FormRadioDelegate {
                     text: i18nc("@option:check", "Private (invite only)")
                     description: i18n("Only invited people can join.")
@@ -95,14 +95,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18nc("@option:check", "Message history visibility")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18nc("@option:check", "Message history visibility")
-                }
                 MobileForm.FormRadioDelegate {
                     text: i18nc("@option:check", "Anyone")
                     description: i18nc("@option:check", "Anyone, regardless of whether they have joined, can view history.")

src/qml/Settings/AccountEditorPage.qml

@@ -19,17 +19,19 @@ Kirigami.ScrollablePage {
 
     readonly property bool compact: width > Kirigami.Units.gridUnit * 30 ? 2 : 1
 
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("User information")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("User information")
-                }
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
                     background: Item {}
@@ -122,14 +124,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Password")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Password")
-                }
                 MobileForm.FormTextDelegate {
                     visible: root.connection !== undefined && root.connection.canChangePassword === false
                     text: i18n("Your server doesn't support changing your password")
@@ -191,14 +193,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Server Information")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Server Information")
-                }
                 MobileForm.FormTextDelegate {
                     text: i18n("Homeserver url")
                     description: root.connection.homeserver
@@ -222,14 +224,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Sign out")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Sign out")
-                }
                 MobileForm.FormButtonDelegate {
                     Layout.fillWidth: true
                     text: i18n("Sign out")

src/qml/Settings/AccountsPage.qml

@@ -13,19 +13,20 @@ import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18n("Accounts")
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
 
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Accounts")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Accounts")
-                }
-
                 Repeater {
                     model: AccountRegistry
                     delegate: MobileForm.AbstractFormDelegate {

src/qml/Settings/AppearanceSettingsPage.qml

@@ -13,18 +13,19 @@ import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18nc("@title:window", "Appearance")
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("General theme")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
             spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("General theme")
-                }
-
                 MobileForm.AbstractFormDelegate {
                     id: timelineModeSetting
                     Layout.fillWidth: true
@@ -316,16 +317,14 @@ Kirigami.ScrollablePage {
             }
         }
         
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Show Avatar")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Show Avatar")
-                }
-                
                 MobileForm.FormCheckDelegate {
                     text: i18n("In chat")
                     checked: Config.showAvatarInTimeline

src/qml/Settings/DevicesPage.qml

@@ -12,19 +12,20 @@ import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18n("Devices")
-
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
-
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Devices")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
 
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Devices")
-                }
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
                     visible: Controller.activeConnection && deviceRepeater.count === 0 // We can assume 0 means loading since there is at least one device

src/qml/Settings/EmoticonEditorPage.qml

@@ -24,6 +24,7 @@ Kirigami.ScrollablePage {
     property bool newEmoticon: false
     required property var emoticonType
 
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
 
@@ -31,14 +32,15 @@ Kirigami.ScrollablePage {
             : (newEmoticon ? i18nc("@title", "Add Emoji") : i18nc("@title", "Edit Emoji"))
 
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: emoticonType === EmoticonFormCard.Stickers ? i18n("Sticker") : i18n("Emoji")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: emoticonType === EmoticonFormCard.Stickers ? i18n("Sticker") : i18n("Emoji")
-                }
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
                     background: Item {}

src/qml/Settings/EmoticonFormCard.qml

@@ -20,13 +20,9 @@ MobileForm.FormCard {
 
     property var emoticonType
 
-    Layout.topMargin: Kirigami.Units.largeSpacing
     Layout.fillWidth: true
     contentItem: ColumnLayout {
         spacing: 0
-        MobileForm.FormCardHeader {
-            title: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis ? i18n("Emojis") : i18n("Stickers")
-        }
         Flow {
             id: stickerFlow
             Layout.fillWidth: true

src/qml/Settings/EmoticonsPage.qml

@@ -14,13 +14,23 @@ Kirigami.ScrollablePage {
     id: root
 
     title: emoticonType === EmoticonFormCard.Emojis ? i18n("Emojis") : i18n("Stickers")
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
 
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Emojis")
+        }
         EmoticonFormCard {
             emoticonType: EmoticonFormCard.Emojis
         }
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Stickers")
+        }
         EmoticonFormCard {
             emoticonType: EmoticonFormCard.Stickers
         }

src/qml/Settings/GeneralSettingsPage.qml

@@ -13,18 +13,20 @@ import org.kde.neochat 1.0
 
 Kirigami.ScrollablePage {
     title: i18nc("@title:window", "General")
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("General settings")
+            visible: Qt.platform.os !== "android"
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("General settings")
-                    visible: Qt.platform.os !== "android"
-                }
 
                 MobileForm.FormCheckDelegate {
                     id: closeDelegate
@@ -67,15 +69,14 @@ Kirigami.ScrollablePage {
                 }
             }
         }
-
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Timeline Events")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Timeline Events")
-                }
 
                 MobileForm.FormCheckDelegate {
                     id: showDeletedMessages
@@ -155,15 +156,14 @@ Kirigami.ScrollablePage {
                 }
             }
         }
-
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Rooms and private chats")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Rooms and private chats")
-                }
                 MobileForm.FormRadioDelegate {
                     text: i18n("Separated")
                     checked: !Config.mergeRoomList
@@ -184,15 +184,14 @@ Kirigami.ScrollablePage {
                 }
             }
         }
-
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18nc("Chat Editor", "Editor")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18nc("Chat Editor", "Editor")
-                }
                 MobileForm.FormCheckDelegate {
                     id: quickEditCheckbox
                     text: i18n("Use s/text/replacement syntax to edit your last message")
@@ -216,15 +215,14 @@ Kirigami.ScrollablePage {
                 }
             }
         }
-
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Developer Settings")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Developer Settings")
-                }
                 MobileForm.FormCheckDelegate {
                     text: i18n("Enable developer tools")
                     checked: Config.developerTools

src/qml/Settings/GlobalNotificationsPage.qml

@@ -15,14 +15,17 @@ Kirigami.ScrollablePage {
     id: root
 
     title: i18nc("@title:window", "Notifications")
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
 
     ColumnLayout {
         id: notificationLayout
+        spacing: 0
 
         MobileForm.FormCard {
             Layout.fillWidth: true
+            Layout.topMargin: Kirigami.Units.largeSpacing
             contentItem: MobileForm.FormCheckDelegate {
                 text: i18n("Enable notifications for this account")
                 description: i18n("Whether push notifications are generated by your Matrix server")
@@ -34,19 +37,19 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Room Notifications")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
 
             contentItem: ColumnLayout {
                 spacing: 0
 
-                MobileForm.FormCardHeader {
-                    title: i18n("Room Notifications")
-                }
                 Repeater {
                     model: KSortFilterProxyModel {
                         sourceModel: Controller.pushRuleModel
-
                         filterRowCallback: function(source_row, source_parent) {
                             let sectionRole = sourceModel.data(sourceModel.index(source_row, 0, source_parent), PushRuleModel.SectionRole)
                             return sectionRole == PushNotificationSection.Room;
@@ -58,19 +61,18 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("@Mentions")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
 
             contentItem: ColumnLayout {
                 spacing: 0
-
-                MobileForm.FormCardHeader {
-                    title: i18n("@Mentions")
-                }
                 Repeater {
                     model: KSortFilterProxyModel {
                         sourceModel: Controller.pushRuleModel
-
                         filterRowCallback: function(source_row, source_parent) {
                             let sectionRole = sourceModel.data(sourceModel.index(source_row, 0, source_parent), PushRuleModel.SectionRole)
                             return sectionRole == PushNotificationSection.Mentions;
@@ -82,15 +84,15 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Keywords")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
 
             contentItem: ColumnLayout {
                 spacing: 0
-
-                MobileForm.FormCardHeader {
-                    title: i18n("Keywords")
-                }
                 Repeater {
                     model: KSortFilterProxyModel {
                         sourceModel: Controller.pushRuleModel
@@ -152,19 +154,18 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Invites")
+        }
         MobileForm.FormCard {
             Layout.fillWidth: true
 
             contentItem: ColumnLayout {
                 spacing: 0
-
-                MobileForm.FormCardHeader {
-                    title: i18n("Invites")
-                }
                 Repeater {
                     model: KSortFilterProxyModel {
                         sourceModel: Controller.pushRuleModel
-
                         filterRowCallback: function(source_row, source_parent) {
                             let sectionRole = sourceModel.data(sourceModel.index(source_row, 0, source_parent), PushRuleModel.SectionRole)
                             return sectionRole == PushNotificationSection.Invites;

src/qml/Settings/NetworkProxyPage.qml

@@ -15,17 +15,19 @@ Kirigami.ScrollablePage {
     property int currentType
     property bool proxyConfigChanged: false
 
+    topPadding: 0
     leftPadding: 0
     rightPadding: 0
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Network Proxy")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Network Proxy")
-                }
                 MobileForm.FormRadioDelegate {
                     text: i18n("System Default")
                     checked: currentType === 0
@@ -53,14 +55,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Proxy Settings")
+        }
         MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Proxy Settings")
-                }
                 MobileForm.FormTextFieldDelegate {
                     id: hostField
                     label: i18n("Host")

src/qml/Settings/SonnetConfigPage.qml

@@ -11,23 +11,26 @@ import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
 
 Kirigami.ScrollablePage {
     id: page
+    topPadding: 0
+    leftPadding: 0
+    rightPadding: 0
 
     ColumnLayout {
+        spacing: 0
+        MobileForm.FormHeader {
+            Layout.fillWidth: true
+            title: i18n("Spellchecking")
+        }
         MobileForm.FormCard {
             id: card
             Sonnet.Settings {
                 id: settings
             }
 
-            Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
 
             contentItem: ColumnLayout {
                 spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Spellchecking")
-                }
-
                 MobileForm.FormCheckDelegate {
                     id: enable
                     checked: settings.checkerEnabledByDefault