Fix margins for cells and navigations titles in most settings views

16 files changed, 91 insertions, 103 deletions

diff --git a/ios/Assets/Localizable.xcstrings b/ios/Assets/Localizable.xcstrings
index 673968eadb..801dd39441 100644
--- a/ios/Assets/Localizable.xcstrings
+++ b/ios/Assets/Localizable.xcstrings
@@ -262,7 +262,6 @@
 
     },
     "Account deletion" : {
-
     },
     "Account number" : {
       "localizations" : {
@@ -1283,7 +1282,6 @@
 
     },
     "Delete Account" : {
-
     },
     "Delete list" : {
       "localizations" : {
@@ -1330,7 +1328,6 @@
       }
     },
     "Deleting account..." : {
-
     },
     "Device is inactive" : {
       "localizations" : {
@@ -2472,7 +2469,6 @@
       }
     },
     "Last four digits of the account number are incorrect" : {
-
     },
     "Last used account" : {
 
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/Edit/EditAccessMethodViewController.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/Edit/EditAccessMethodViewController.swift
index a898ed1aa8..a535843421 100644
--- a/ios/MullvadVPN/Coordinators/Settings/APIAccess/Edit/EditAccessMethodViewController.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/Edit/EditAccessMethodViewController.swift
@@ -46,26 +46,17 @@ class EditAccessMethodViewController: UIViewController {
         super.viewDidLoad()
 
         view.backgroundColor = .secondaryColor
+        isModalInPresentation = true
 
         tableView.setAccessibilityIdentifier(.editAccessMethodView)
         tableView.backgroundColor = .secondaryColor
         tableView.delegate = self
         tableView.sectionFooterHeight = UITableView.automaticDimension
         tableView.estimatedSectionFooterHeight = 44
-        isModalInPresentation = true
+        tableView.directionalLayoutMargins = .init(top: 0, leading: 16, bottom: 0, trailing: 16)
 
-        let title = createTitle()
-        view.addConstrainedSubviews([title, tableView]) {
-            title.pinEdgesToSuperviewMargins(PinnableEdges([.top(0)]))
-            title.pinEdgesToSuperview(PinnableEdges([
-                .leading(UIMetrics.SettingsCell.defaultLayoutMargins.leading),
-                .trailing(UIMetrics.SettingsCell.defaultLayoutMargins.trailing),
-            ]))
-            tableView.pinEdgesToSuperview(.all().excluding(.top))
-            tableView.topAnchor.constraint(
-                equalTo: title.bottomAnchor,
-                constant: UIMetrics.SettingsCell.layoutMargins.top
-            )
+        view.addConstrainedSubviews([tableView]) {
+            tableView.pinEdgesToSuperview(.all())
         }
 
         configureDataSource()
@@ -76,18 +67,6 @@ class EditAccessMethodViewController: UIViewController {
         super.viewWillDisappear(animated)
         interactor.cancelProxyConfigurationTest()
     }
-
-    private func createTitle() -> UIView {
-        let label = UILabel()
-        label.font = .mullvadBig
-        label.adjustsFontForContentSizeCategory = true
-        label.numberOfLines = 0
-        label.lineBreakMode = .byWordWrapping
-        label.lineBreakStrategy = []
-        label.text = subject.value.navigationItemTitle
-        label.textColor = UIColor.NavigationBar.titleColor
-        return label
-    }
 }
 
 // MARK: - UITableViewDelegate
@@ -121,12 +100,7 @@ extension EditAccessMethodViewController: UITableViewDelegate {
                     delegate?.controllerShouldShowMethodInfo(self, config: infoModalConfig)
                 }
             }
-            headerView?.directionalLayoutMargins = NSDirectionalEdgeInsets(
-                top: 4,
-                leading: 0,
-                bottom: 16,
-                trailing: 0
-            )
+            headerView?.directionalLayoutMargins = UIMetrics.TableView.headingLayoutMargins
 
             return headerView ?? UIView()
         default:
@@ -142,7 +116,7 @@ extension EditAccessMethodViewController: UITableViewDelegate {
         case .testingStatus:
             subject.value.testingStatus == .initial ? 0 : UITableView.automaticDimension
         case .enableMethod:
-            UITableView.automaticDimension
+            subject.value.infoHeaderConfig == nil ? 8 : UITableView.automaticDimension
         default:
             0
         }
@@ -180,7 +154,7 @@ extension EditAccessMethodViewController: UITableViewDelegate {
         case .testingStatus:
             switch subject.value.testingStatus {
             case .initial, .inProgress:
-                0
+                8
             case .succeeded, .failed:
                 defaultMargin
             }
@@ -377,8 +351,7 @@ extension EditAccessMethodViewController: UITableViewDelegate {
     // MARK: - Misc
 
     private func configureNavigationItem() {
-        navigationItem.largeTitleDisplayMode = .never
-        navigationItem.title = ""
+        title = subject.value.navigationItemTitle
     }
 
     private func onSave() {
diff --git a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift
index 85fad5fb75..3d79d5979a 100644
--- a/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/APIAccess/List/ListAccessMethodView.swift
@@ -40,7 +40,6 @@ struct ListAccessMethodView<ViewModel>: View where ViewModel: ListAccessViewMode
                     link: about,
                     onTapLink: viewModel.showAbout
                 )
-                .padding(.bottom, 16)
             }, footer: {
                 MainButton(
                     text: LocalizedStringKey("Add"),
@@ -49,7 +48,6 @@ struct ListAccessMethodView<ViewModel>: View where ViewModel: ListAccessViewMode
                     viewModel.addNewMethod()
                 }
                 .accessibilityIdentifier(AccessibilityIdentifier.addAccessMethodButton.asString)
-                .padding(.top, 24)
             }, content: { item in
                 let accessibilityId: AccessibilityIdentifier? = switch item.id {
                 case AccessMethodRepository.directId:
diff --git a/ios/MullvadVPN/Coordinators/Settings/Views/SettingsInfoContainerView.swift b/ios/MullvadVPN/Coordinators/Settings/Views/SettingsInfoContainerView.swift
index b38da99a09..87fec35601 100644
--- a/ios/MullvadVPN/Coordinators/Settings/Views/SettingsInfoContainerView.swift
+++ b/ios/MullvadVPN/Coordinators/Settings/Views/SettingsInfoContainerView.swift
@@ -19,7 +19,7 @@ struct SettingsInfoContainerView<Content: View>: View {
         ScrollView {
             VStack {
                 content
-                    .padding(.top, UIMetrics.contentInsets.top)
+                    .padding(.top, UIMetrics.TableView.emptyHeaderHeight)
                     .padding(.bottom, UIMetrics.contentInsets.bottom)
             }
         }
diff --git a/ios/MullvadVPN/UI appearance/UIMetrics.swift b/ios/MullvadVPN/UI appearance/UIMetrics.swift
index cc9bdbb5c9..8904090618 100644
--- a/ios/MullvadVPN/UI appearance/UIMetrics.swift
+++ b/ios/MullvadVPN/UI appearance/UIMetrics.swift
@@ -17,12 +17,15 @@ enum UIMetrics {
         /// Height for separators between cells and/or sections.
         static let separatorHeight: CGFloat = 0.33
         /// Spacing used between distinct sections of views
-        static let sectionSpacing: CGFloat = 24
-        /// Common layout margins for row views presentation
-        /// Similar to `SettingsCell.layoutMargins` however maintains equal horizontal spacing
-        static let rowViewLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 24, bottom: 16, trailing: 24)
+        static let sectionSpacing: CGFloat = 16
+        /// Spacing used for empty header views
+        static let emptyHeaderHeight: CGFloat = 8
         /// Common cell indentation width
         static let cellIndentationWidth: CGFloat = 16
+        /// Spacing for info button
+        static let infoButtonSpacing: CGFloat = 8
+        /// Heading margins
+        static let headingLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 0)
     }
 
     enum CustomAlert {
@@ -76,15 +79,14 @@ enum UIMetrics {
     }
 
     enum SettingsCell {
-        static let textFieldContentInsets = UIEdgeInsets(top: 8, left: 24, bottom: 8, right: 24)
+        static let textFieldContentInsets = UIEdgeInsets(top: 16, left: 24, bottom: 16, right: 24)
         static let textFieldNonEditingContentInsetLeft: CGFloat = 40
-        static let layoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 24, bottom: 16, trailing: 12)
         static let inputCellTextFieldLayoutMargins = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8)
         static let selectableSettingsCellLeftViewSpacing: CGFloat = 12
         static let checkableSettingsCellLeftViewSpacing: CGFloat = 12
 
         /// Cell layout margins used in table views.
-        static let defaultLayoutMargins = NSDirectionalEdgeInsets(top: 11, leading: 16, bottom: 11, trailing: 16)
+        static let defaultLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
 
         static let settingsValidationErrorLayoutMargins = NSDirectionalEdgeInsets(
             top: 8,
@@ -99,7 +101,7 @@ enum UIMetrics {
     }
 
     enum SettingsInfoView {
-        static let layoutMargins = EdgeInsets(top: 0, leading: 24, bottom: 0, trailing: 24)
+        static let layoutMargins = EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)
     }
 
     enum SettingsRowView {
@@ -190,7 +192,7 @@ extension UIMetrics {
     static let contentLayoutMargins = contentInsets.toDirectionalInsets
 
     /// Common content margins for content presentation
-    static let contentInsets = UIEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
+    static let contentInsets = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
 
     /// Common layout margins for location cell presentation
     static let locationCellLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 12)
@@ -199,5 +201,8 @@ extension UIMetrics {
     static let largeNavigationTitlePadding = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)
 
     /// Layout margins used by content heading displayed below the large navigation title.
-    static let contentHeadingLayoutMargins = NSDirectionalEdgeInsets(top: 8, leading: 24, bottom: 24, trailing: 24)
+    static let contentHeadingLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16)
+
+    /// Layout margins used by content footer displayed below eg. a list.
+    static let contentFooterLayoutMargins = NSDirectionalEdgeInsets(top: 24, leading: 16, bottom: 0, trailing: 16)
 }
diff --git a/ios/MullvadVPN/View controllers/ChangeLog/ChangeLogView.swift b/ios/MullvadVPN/View controllers/ChangeLog/ChangeLogView.swift
index 8bed1dbfe3..afac255ba4 100644
--- a/ios/MullvadVPN/View controllers/ChangeLog/ChangeLogView.swift
+++ b/ios/MullvadVPN/View controllers/ChangeLog/ChangeLogView.swift
@@ -23,14 +23,15 @@ struct ChangeLogView<ViewModel>: View where ViewModel: ChangeLogViewModelProtoco
                     .fontWeight(.semibold)
                     .foregroundColor(UIColor.primaryTextColor.color)
                     .frame(maxWidth: .infinity, alignment: .leading)
-                    .padding(.horizontal, 24.0)
+                    .padding(.horizontal, UIMetrics.contentInsets.left)
+                    .padding(.top, UIMetrics.TableView.emptyHeaderHeight)
                 List {
                     ForEach(viewModel.changeLog?.changes ?? [], id: \.self) { item in
                         BulletPointText(text: item)
                             .listRowSeparator(.hidden)
                             .listRowBackground(Color.clear)
                     }
-                    .padding(.horizontal, 24.0)
+                    .padding(.horizontal, UIMetrics.contentInsets.left)
                 }
                 .listStyle(.plain)
                 .frame(maxHeight: .infinity)
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift b/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift
index c144967637..57b73a6223 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsAddDNSEntryCell.swift
@@ -15,6 +15,7 @@ class SettingsAddDNSEntryCell: SettingsCell {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
 
         backgroundView?.backgroundColor = UIColor.Cell.Background.indentationLevelZero
+        titleLabel.font = .mullvadSmall
 
         let gestureRecognizer = UITapGestureRecognizer(
             target: self,
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift b/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift
index 9ea17866e4..c6e4bb5d36 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsCell.swift
@@ -144,9 +144,9 @@ class SettingsCell: UITableViewCell, CustomCellDisclosureHandling {
                 detailTitleLabel.leadingAnchor.constraint(greaterThanOrEqualTo: infoButton.trailingAnchor)
             }
 
-            infoButton.leadingAnchor.constraint(
-                equalTo: titleLabel.trailingAnchor,
-                constant: -UIMetrics.interButtonSpacing
+            titleLabel.trailingAnchor.constraint(
+                equalTo: infoButton.leadingAnchor,
+                constant: UIMetrics.TableView.infoButtonSpacing
             )
             infoButton.centerYAnchor.constraint(equalTo: titleLabel.centerYAnchor)
         }
@@ -154,7 +154,8 @@ class SettingsCell: UITableViewCell, CustomCellDisclosureHandling {
         contentView.addConstrainedSubviews([leftContentContainer, mainContentContainer, rightContentContainer]) {
             mainContentContainer.pinEdgesToSuperviewMargins(.all().excluding([.leading, .trailing]))
 
-            leftContentContainer.pinEdgesToSuperviewMargins(.all().excluding(.trailing))
+            leftContentContainer.pinEdgesToSuperviewMargins(.all().excluding([.leading, .trailing]))
+            leftContentContainer.pinEdgesToSuperview(.init([.leading(16)]))
             leftContentContainer.trailingAnchor.constraint(equalTo: mainContentContainer.leadingAnchor)
 
             rightContentContainer.pinEdgesToSuperview(.all().excluding(.leading))
@@ -207,9 +208,9 @@ class SettingsCell: UITableViewCell, CustomCellDisclosureHandling {
 
     private func setLayoutMargins() {
         // Set layout margins for standard acceessories added into the cell (reorder control, etc..)
-        directionalLayoutMargins = UIMetrics.SettingsCell.layoutMargins
+        directionalLayoutMargins = UIMetrics.SettingsCell.defaultLayoutMargins
 
         // Set layout margins for cell content
-        contentView.directionalLayoutMargins = UIMetrics.SettingsCell.layoutMargins
+        contentView.directionalLayoutMargins = UIMetrics.SettingsCell.defaultLayoutMargins
     }
 }
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsDNSInfoCell.swift b/ios/MullvadVPN/View controllers/Settings/SettingsDNSInfoCell.swift
index 70ba6039d1..f440497dc0 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsDNSInfoCell.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsDNSInfoCell.swift
@@ -15,17 +15,18 @@ class SettingsDNSInfoCell: UITableViewCell {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
 
         backgroundColor = .secondaryColor
-        contentView.directionalLayoutMargins = UIMetrics.SettingsCell.layoutMargins
+        contentView.directionalLayoutMargins = UIMetrics.SettingsCell.defaultLayoutMargins
 
         titleLabel.adjustsFontForContentSizeCategory = true
         titleLabel.translatesAutoresizingMaskIntoConstraints = false
-        titleLabel.textColor = UIColor.Cell.titleTextColor
+        titleLabel.textColor = UIColor.TableSection.footerTextColor
         titleLabel.numberOfLines = 0
         titleLabel.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
         titleLabel.setContentHuggingPriority(.defaultLow, for: .vertical)
 
         contentView.addConstrainedSubviews([titleLabel]) {
-            titleLabel.pinEdgesToSuperviewMargins()
+            titleLabel.pinEdgesToSuperviewMargins(.all().excluding([.leading]))
+            titleLabel.pinEdgesToSuperview(.init([.leading(16)]))
         }
     }
 
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsDataSource.swift b/ios/MullvadVPN/View controllers/Settings/SettingsDataSource.swift
index 017ba9cc4c..6f079673a7 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsDataSource.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsDataSource.swift
@@ -107,6 +107,10 @@ final class SettingsDataSource: UITableViewDiffableDataSource<SettingsDataSource
         }
 
         tableView.sectionFooterHeight = 0
+        tableView.tableHeaderView = UIView(frame: CGRect(
+            origin: .zero,
+            size: CGSize(width: 0, height: UIMetrics.TableView.emptyHeaderHeight)
+        ))
         tableView.delegate = self
 
         registerClasses()
@@ -138,14 +142,19 @@ final class SettingsDataSource: UITableViewDiffableDataSource<SettingsDataSource
     }
 
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
-        guard let section = sectionIdentifier(for: section) else { return nil }
+        tableView.dequeueReusableHeaderFooterView(
+            withIdentifier: HeaderFooterReuseIdentifier.spacer.rawValue
+        )
+    }
+
+    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
+        guard let section = sectionIdentifier(for: section) else { return 0 }
+
         return switch section {
-        case .language:
-            nil
+        case .vpnSettings:
+            0
         default:
-            tableView.dequeueReusableHeaderFooterView(
-                withIdentifier: HeaderFooterReuseIdentifier.spacer.rawValue
-            )
+            UIMetrics.TableView.sectionSpacing
         }
     }
 
diff --git a/ios/MullvadVPN/View controllers/Settings/SettingsHeaderView.swift b/ios/MullvadVPN/View controllers/Settings/SettingsHeaderView.swift
index ce07483272..455f60fee8 100644
--- a/ios/MullvadVPN/View controllers/Settings/SettingsHeaderView.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SettingsHeaderView.swift
@@ -83,23 +83,23 @@ class SettingsHeaderView: UITableViewHeaderFooterView {
             for: .touchUpInside
         )
 
-        contentView.directionalLayoutMargins = UIMetrics.SettingsCell.layoutMargins
+        contentView.directionalLayoutMargins = UIMetrics.SettingsCell.defaultLayoutMargins
         contentView.backgroundColor = UIColor.Cell.Background.normal
 
         let buttonAreaWidth = UIMetrics.contentLayoutMargins.leading + UIMetrics
             .contentLayoutMargins.trailing + buttonWidth
 
         contentView.addConstrainedSubviews([titleLabel, infoButton, collapseButton]) {
-            titleLabel.pinEdgesToSuperviewMargins(.all().excluding(.trailing).excluding(.bottom))
+            titleLabel.pinEdgesToSuperview(.init([.top(contentView.layoutMargins.top), .leading(16)]))
             titleLabel.bottomAnchor.constraint(
                 equalTo: contentView.bottomAnchor,
                 constant: -contentView.layoutMargins.bottom
             ).withPriority(.defaultHigh)
 
             infoButton.pinEdgesToSuperview(.init([.top(0), .bottom(0)]))
-            infoButton.leadingAnchor.constraint(
-                equalTo: titleLabel.trailingAnchor,
-                constant: -UIMetrics.interButtonSpacing
+            titleLabel.trailingAnchor.constraint(
+                equalTo: infoButton.leadingAnchor,
+                constant: UIMetrics.TableView.infoButtonSpacing
             )
             infoButton.widthAnchor.constraint(equalToConstant: buttonAreaWidth)
 
diff --git a/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift b/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift
index 6449dbf6d5..5ca514e996 100644
--- a/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift
+++ b/ios/MullvadVPN/View controllers/Settings/SwiftUI components/SingleChoiceList.swift
@@ -196,7 +196,7 @@ struct SingleChoiceList<Value>: View where Value: Equatable {
 
             items()
         }
-        .padding(EdgeInsets(UIMetrics.SettingsCell.layoutMargins))
+        .padding(EdgeInsets(UIMetrics.SettingsCell.defaultLayoutMargins))
         .background(
             isSelected
                 ? Color(UIColor.Cell.Background.selected)
@@ -321,16 +321,15 @@ struct SingleChoiceList<Value>: View where Value: Equatable {
     private func subtitleRow(_ text: String) -> some View {
         HStack {
             Text(text)
-                .font(.callout)
-                .opacity(0.6)
+                .font(.mullvadTiny)
             Spacer()
         }
-        .padding(.horizontal, UIMetrics.SettingsCell.layoutMargins.leading)
-        .padding(.vertical, 4)
+        .padding(.horizontal, UIMetrics.SettingsCell.defaultLayoutMargins.leading)
+        .padding(.vertical, 16)
         .background(
             Color(.secondaryColor)
         )
-        .foregroundColor(Color(UIColor.Cell.titleTextColor))
+        .foregroundColor(Color(UIColor.TableSection.footerTextColor))
     }
 
     var body: some View {
@@ -339,7 +338,7 @@ struct SingleChoiceList<Value>: View where Value: Equatable {
                 Text(title).fontWeight(.semibold)
                 Spacer()
             }
-            .padding(EdgeInsets(UIMetrics.SettingsCell.layoutMargins))
+            .padding(EdgeInsets(UIMetrics.SettingsCell.defaultLayoutMargins))
             .background(Color(UIColor.Cell.Background.normal))
             List {
                 Section {
@@ -381,7 +380,7 @@ struct SingleChoiceList<Value>: View where Value: Equatable {
             .environment(\.defaultMinListRowHeight, 0)
             Spacer()
         }
-        .padding(EdgeInsets(top: 24, leading: 0, bottom: 0, trailing: 0))
+        .padding(.top, 8)
         .background(Color(.secondaryColor))
         .foregroundColor(Color(.primaryTextColor))
         .onAppear {
diff --git a/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSCellFactory.swift b/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSCellFactory.swift
index 8d80402bf3..0886b4165b 100644
--- a/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSCellFactory.swift
+++ b/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSCellFactory.swift
@@ -175,7 +175,7 @@ final class CustomDNSCellFactory: @preconcurrency CellFactoryProtocol {
 
             cell.titleLabel.attributedText = viewModel.customDNSPrecondition.attributedLocalizedDescription(
                 isEditing: isEditing,
-                preferredFont: .mullvadSmallSemiBold
+                preferredFont: .mullvadTiny
             )
         }
     }
diff --git a/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSViewController.swift b/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSViewController.swift
index 8f663c14af..608ed49432 100644
--- a/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSViewController.swift
+++ b/ios/MullvadVPN/View controllers/VPNSettings/CustomDNSViewController.swift
@@ -58,7 +58,7 @@ class CustomDNSViewController: UITableViewController {
 
         tableView.tableHeaderView = UIView(frame: CGRect(
             origin: .zero,
-            size: CGSize(width: 0, height: UIMetrics.TableView.sectionSpacing)
+            size: CGSize(width: 0, height: UIMetrics.TableView.emptyHeaderHeight)
         ))
     }
 
diff --git a/ios/MullvadVPN/View controllers/VPNSettings/VPNSettingsViewController.swift b/ios/MullvadVPN/View controllers/VPNSettings/VPNSettingsViewController.swift
index 558c5f2c85..4f17e35f1b 100644
--- a/ios/MullvadVPN/View controllers/VPNSettings/VPNSettingsViewController.swift
+++ b/ios/MullvadVPN/View controllers/VPNSettings/VPNSettingsViewController.swift
@@ -73,7 +73,7 @@ class VPNSettingsViewController: UITableViewController {
         let showsSingleSection = section != nil
         tableView.tableHeaderView = UIView(frame: CGRect(
             origin: .zero,
-            size: CGSize(width: 0, height: showsSingleSection ? 0 : UIMetrics.TableView.sectionSpacing)
+            size: CGSize(width: 0, height: showsSingleSection ? 0 : UIMetrics.TableView.emptyHeaderHeight)
         ))
     }
 }
diff --git a/ios/MullvadVPN/Views/List/MullvadList.swift b/ios/MullvadVPN/Views/List/MullvadList.swift
index 62a7dae96b..5eb26e7995 100644
--- a/ios/MullvadVPN/Views/List/MullvadList.swift
+++ b/ios/MullvadVPN/Views/List/MullvadList.swift
@@ -36,28 +36,32 @@ struct MullvadList<Content: View, Data: RandomAccessCollection<ID>, ID: Hashable
     }
 
     var body: some View {
-        List {
-            if let headerView = header?() {
-                headerView
-                    .listRowBackground(Color.clear)
-                    .listRowSeparator(.hidden)
-            }
+        VStack(alignment: .leading) {
+            List {
+                if let headerView = header?() {
+                    headerView
+                        .listRowBackground(Color.clear)
+                        .listRowSeparator(.hidden)
+                        .listRowInsets(EdgeInsets(UIMetrics.contentHeadingLayoutMargins))
+                }
 
-            ForEach(data, id: id) { item in
-                content(item)
-                    .listRowInsets(.init())
-                    .listRowSeparator(.hidden)
-            }
+                ForEach(data, id: id) { item in
+                    content(item)
+                        .listRowInsets(.init())
+                        .listRowSeparator(.hidden)
+                }
 
-            if let footerView = footer?() {
-                footerView
-                    .listRowBackground(Color.clear)
-                    .listRowSeparator(.hidden)
+                if let footerView = footer?() {
+                    footerView
+                        .listRowBackground(Color.clear)
+                        .listRowSeparator(.hidden)
+                        .listRowInsets(EdgeInsets(UIMetrics.contentFooterLayoutMargins))
+                }
             }
+            .listStyle(.plain)
+            .listRowSpacing(UIMetrics.TableView.separatorHeight)
+            .environment(\.defaultMinListRowHeight, 0)
         }
-        .listStyle(.plain)
-        .listRowSpacing(UIMetrics.TableView.separatorHeight)
-        .environment(\.defaultMinListRowHeight, 0)
     }
 }