Make text scale with Dynamic Type

Vault/Sources/VaultiOS/Views/Backup/BackupCreatePDFView.swift

@@ -43,6 +43,7 @@ struct BackupCreatePDFView: View {
                 .font(.callout)
                 .frame(minHeight: 150)
                 .keyboardType(.default)
+                .contentMargins(12, for: .scrollContent)
                 .listRowInsets(EdgeInsets())
         } header: {
             Text("Options")

Vault/Sources/VaultiOS/Views/Backup/BackupImportCodeStateVisualizerView.swift

@@ -9,11 +9,11 @@ struct BackupImportCodeStateVisualizerView: View {
         LazyVGrid(columns: [.init(.adaptive(minimum: 30, maximum: 40))], spacing: 8) {
             ForEach(0 ..< totalCount, id: \.self) { index in
                 Image(systemName: "qrcode")
-                    .font(.system(size: 28))
+                    .font(.largeTitle)
                     .foregroundStyle(.primary.opacity(selectedIndexes.contains(index) ? 0.05 : 1))
                     .overlay(content: {
                         Image(systemName: "checkmark.circle.fill")
-                            .font(.system(size: 24).bold())
+                            .font(.title2.bold())
                             .foregroundStyle(.green)
                             .opacity(selectedIndexes.contains(index) ? 1 : 0)
                     })

Vault/Sources/VaultiOS/Views/Detail/OTP/OTPCodeDetailView.swift

@@ -237,6 +237,7 @@ struct OTPCodeDetailView<PreviewGenerator: VaultItemPreviewViewGenerator<VaultIt
                 .font(.subheadline)
                 .frame(minHeight: 120)
                 .keyboardType(.default)
+                .contentMargins(12, for: .scrollContent)
                 .listRowInsets(EdgeInsets())
         } header: {
             Text(viewModel.strings.descriptionTitle)
@@ -311,7 +312,7 @@ struct OTPCodeDetailView<PreviewGenerator: VaultItemPreviewViewGenerator<VaultIt
                 metadata: metadata,
                 behaviour: .normal,
             )
-            .frame(width: 180)
+            .frame(maxWidth: 240)
             .fixedSize(horizontal: false, vertical: true)
             .containerRelativeFrame(.horizontal)
             .padding(.vertical, 8)

Vault/Sources/VaultiOS/Views/Detail/SecureNote/SecureNoteDetailView.swift

@@ -266,6 +266,7 @@ struct SecureNoteDetailView: View {
                 .fontDesign(.monospaced)
                 .frame(minHeight: 400)
                 .keyboardType(.default)
+                .contentMargins(12, for: .scrollContent)
                 .listRowInsets(EdgeInsets())
         } header: {
             noteIconEditingHeader

Vault/Sources/VaultiOS/Views/General/FormRow.swift

@@ -8,7 +8,7 @@ struct FormRow<Content: View>: View {
     var alignment: VerticalAlignment
     var content: () -> Content
 
-    private let prominentIconSize: Double = 28
+    @ScaledMetric(relativeTo: .body) private var prominentIconSize: Double = 28
 
     enum Style {
         case prominent
@@ -45,7 +45,7 @@ struct FormRow<Content: View>: View {
         ZStack {
             color
             image
-                .font(.system(size: prominentIconSize / 2.0))
+                .font(.body)
         }
         .clipShape(RoundedRectangle(cornerRadius: 8))
         .frame(width: prominentIconSize, height: prominentIconSize)

Vault/Sources/VaultiOS/Views/General/LoadingBarLabel.swift

@@ -8,8 +8,8 @@ struct LoadingBarLabel: View {
             .lineLimit(1)
             .truncationMode(.tail)
             .textCase(.uppercase)
-            .font(.system(size: 7, weight: .semibold))
-            .foregroundColor(.white)
+            .font(.caption2.weight(.semibold))
+            .foregroundStyle(.white)
             .padding(.horizontal, 8)
             .shadow(color: .black, radius: 10)
     }

Vault/Sources/VaultiOS/Views/General/PlaceholderView.swift

@@ -7,12 +7,14 @@ struct PlaceholderView: View {
     var title: String
     var subtitle: String?
 
+    @ScaledMetric(relativeTo: .largeTitle) private var iconHeight: Double = 40
+
     var body: some View {
         VStack(alignment: .leading, spacing: 16) {
             Image(systemName: systemIcon)
                 .font(.largeTitle)
                 .foregroundStyle(.primary)
-                .frame(height: 40, alignment: .center)
+                .frame(height: iconHeight, alignment: .center)
             VStack(alignment: .leading, spacing: 2) {
                 Text(title)
                     .font(.headline)

Vault/Sources/VaultiOS/Views/General/SelectableText.swift

@@ -31,6 +31,7 @@ struct SelectableText: UIViewRepresentable {
         textView.isEditable = false
         textView.isSelectable = true
         textView.isScrollEnabled = false
+        textView.textContainerInset = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)
         textView.backgroundColor = .clear
         return textView
     }
@@ -51,15 +52,20 @@ struct SelectableText: UIViewRepresentable {
 }
 
 extension SelectableText.FontStyle {
-    fileprivate var uifont: UIFont {
-        switch self {
-        case .normal: .systemFont(ofSize: 16)
-        case .monospace: .monospacedSystemFont(ofSize: 16, weight: .regular)
-        }
-    }
-
+    /// Derives from the text style's own font, so weight and tracking match the
+    /// style rather than being scaled up from a fixed 16pt base.
+    ///
+    /// `preferredFont(forTextStyle:compatibleWith:)` is already scaled for the
+    /// given content size category, so it must not be passed through
+    /// `UIFontMetrics` as well.
     func makeFont(size: UIFont.TextStyle, dynamicTypeSize: DynamicTypeSize) -> UIFont {
         let traitCollection = UITraitCollection(preferredContentSizeCategory: dynamicTypeSize.contentSizeCategory)
-        return UIFontMetrics(forTextStyle: size).scaledFont(for: uifont, compatibleWith: traitCollection)
+        let preferred = UIFont.preferredFont(forTextStyle: size, compatibleWith: traitCollection)
+        switch self {
+        case .normal:
+            return preferred
+        case .monospace:
+            return .monospacedSystemFont(ofSize: preferred.pointSize, weight: .regular)
+        }
     }
 }

Vault/Sources/VaultiOS/Views/Previews/EncryptedItem/EncryptedItemPreviewView.swift

@@ -18,7 +18,9 @@ struct EncryptedItemPreviewView: View {
 
             // Title - emphasized and large
             Text(viewModel.visibleTitle)
-                .font(titleFont)
+                .font(.title.weight(.heavy))
+                .minimumScaleFactor(0.7)
+                .allowsTightening(true)
                 .foregroundStyle(isEditing ? .white : .primary)
                 .lineLimit(nil)
                 .multilineTextAlignment(.leading)
@@ -28,7 +30,7 @@ struct EncryptedItemPreviewView: View {
 
             // Encrypted label at bottom
             Text("Encrypted")
-                .font(.system(size: 9, weight: .medium))
+                .font(.caption2.weight(.medium))
                 .foregroundStyle(isEditing ? .white.opacity(0.6) : .secondary.opacity(0.6))
                 .textCase(.uppercase)
                 .tracking(0.5)
@@ -55,20 +57,6 @@ struct EncryptedItemPreviewView: View {
         case .editingState: true
         }
     }
-
-    private var titleFont: Font {
-        let length = viewModel.visibleTitle.count
-        switch length {
-        case 0 ... 25:
-            return .title.weight(.heavy)
-        case 26 ... 40:
-            return .title2.weight(.heavy)
-        case 41 ... 55:
-            return .title3.weight(.heavy)
-        default:
-            return .system(size: 20, weight: .heavy)
-        }
-    }
 }
 
 #Preview {

Vault/Sources/VaultiOS/Views/Previews/OTP/HOTPCodePreviewView.swift

@@ -63,7 +63,9 @@ struct HOTPCodePreviewView<ButtonView: View>: View {
     private var labelsStack: some View {
         VStack(alignment: .leading, spacing: 2) {
             Text(previewViewModel.visibleIssuer)
-                .font(issuerFont)
+                .font(.title3.bold())
+                .minimumScaleFactor(0.7)
+                .allowsTightening(true)
                 .foregroundStyle(isEditing ? .white : .primary)
                 .lineLimit(2)
 
@@ -98,7 +100,7 @@ struct HOTPCodePreviewView<ButtonView: View>: View {
 
     private var codeText: some View {
         OTPCodeTextView(codeState: behaviour != .normal ? .notReady : previewViewModel.code)
-            .font(.system(size: 36, design: .monospaced))
+            .font(.system(.largeTitle, design: .monospaced))
             .fontWeight(.heavy)
             .minimumScaleFactor(0.5)
             .lineLimit(1)
@@ -132,20 +134,6 @@ struct HOTPCodePreviewView<ButtonView: View>: View {
         case .editingState: true
         }
     }
-
-    private var issuerFont: Font {
-        let length = previewViewModel.visibleIssuer.count
-        switch length {
-        case 0 ... 20:
-            return .title3.weight(.bold)
-        case 21 ... 35:
-            return .system(size: 18, weight: .bold)
-        case 36 ... 50:
-            return .system(size: 16, weight: .bold)
-        default:
-            return .system(size: 14, weight: .bold)
-        }
-    }
 }
 
 #Preview {

Vault/Sources/VaultiOS/Views/Previews/OTP/OTPCodeButtonView.swift

@@ -12,7 +12,7 @@ struct OTPCodeButtonView: View {
             try await viewModel.incrementCounter()
         } label: {
             OTPCodeButtonIcon(isError: viewModel.incrementError != nil)
-                .font(.system(size: 24, weight: isDisabled ? .light : .bold))
+                .font(.title2.weight(isDisabled ? .light : .bold))
         } loading: {
             ProgressView()
         }

Vault/Sources/VaultiOS/Views/Previews/OTP/TOTPCodePreviewView.swift

@@ -53,7 +53,9 @@ struct TOTPCodePreviewView<TimerBar: View>: View {
     private var labelsStack: some View {
         VStack(alignment: .leading, spacing: 2) {
             Text(previewViewModel.visibleIssuer)
-                .font(issuerFont)
+                .font(.title3.bold())
+                .minimumScaleFactor(0.7)
+                .allowsTightening(true)
                 .foregroundStyle(isEditing ? .white : .primary)
                 .lineLimit(2)
 
@@ -88,7 +90,7 @@ struct TOTPCodePreviewView<TimerBar: View>: View {
 
     private var codeSection: some View {
         OTPCodeTextView(codeState: behaviour != .normal ? .notReady : previewViewModel.code)
-            .font(.system(size: 36, design: .monospaced))
+            .font(.system(.largeTitle, design: .monospaced))
             .fontWeight(.heavy)
             .minimumScaleFactor(0.5)
             .lineLimit(1)
@@ -120,20 +122,6 @@ struct TOTPCodePreviewView<TimerBar: View>: View {
         case .editingState: true
         }
     }
-
-    private var issuerFont: Font {
-        let length = previewViewModel.visibleIssuer.count
-        switch length {
-        case 0 ... 20:
-            return .title3.weight(.bold)
-        case 21 ... 35:
-            return .system(size: 18, weight: .bold)
-        case 36 ... 50:
-            return .system(size: 16, weight: .bold)
-        default:
-            return .system(size: 14, weight: .bold)
-        }
-    }
 }
 
 #Preview {

Vault/Sources/VaultiOS/Views/Previews/SecureNote/SecureNotePreviewView.swift

@@ -17,6 +17,8 @@ struct SecureNotePreviewView: View {
 
             Text(title)
                 .font(titleFont)
+                .minimumScaleFactor(0.7)
+                .allowsTightening(true)
                 .foregroundStyle(isEditing ? .white : .primary)
                 .lineLimit(description != nil ? 3 : nil)
                 .multilineTextAlignment(.leading)
@@ -88,30 +90,9 @@ struct SecureNotePreviewView: View {
         }
     }
 
+    /// The title carries more weight when it is the only content in the card.
     private var titleFont: Font {
-        let length = title.count
-        let hasDescription = description != nil
-
-        // Base font size depends on whether there's a description
-        let baseFonts: (Font, Font, Font, Font) = hasDescription
-            ? (
-                .title3.weight(.bold),
-                .system(size: 18, weight: .bold),
-                .system(size: 16, weight: .bold),
-                .system(size: 14, weight: .bold),
-            )
-            : (.title.weight(.heavy), .title2.weight(.heavy), .title3.weight(.heavy), .system(size: 20, weight: .heavy))
-
-        switch length {
-        case 0 ... 25:
-            return baseFonts.0
-        case 26 ... 40:
-            return baseFonts.1
-        case 41 ... 55:
-            return baseFonts.2
-        default:
-            return baseFonts.3
-        }
+        description == nil ? .title.weight(.heavy) : .title3.weight(.bold)
     }
 }
 

Vault/Sources/VaultiOS/Views/Settings/VaultAboutView.swift

@@ -102,7 +102,7 @@ struct VaultAboutView: View {
                 Image("bad-bundle-logo", bundle: VaultFeedAssets.bundle)
                     .resizable(resizingMode: .stretch)
                     .scaledToFit()
-                    .frame(height: 21.6)
+                    .frame(height: 22)
                 Text("free and open since 2024 ✌️")
                     .font(.caption2)
                 Text(appVersionText)

Vault/Sources/VaultiOS/Views/VaultMainScene.swift

@@ -14,7 +14,6 @@ public struct VaultMainScene: Scene {
     @State private var injector: VaultInjector = VaultRoot.vaultInjector
 
     public init() {
-        UITextView.appearance().textContainerInset = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)
         VaultRoot.setup()
     }
 

Vault/Sources/VaultiOSWidgets/Views/OTPWidgetSmallView.swift

@@ -40,7 +40,9 @@ struct OTPWidgetSmallView: View {
     private var labelsStack: some View {
         VStack(alignment: .leading, spacing: 2) {
             Text(displayIssuer)
-                .font(issuerFont)
+                .font(.title3.bold())
+                .minimumScaleFactor(0.7)
+                .allowsTightening(true)
                 .foregroundStyle(.primary)
                 .lineLimit(2)
 
@@ -54,7 +56,7 @@ struct OTPWidgetSmallView: View {
 
     private var codeSection: some View {
         OTPCodeTextView(codeState: codeState)
-            .font(.system(size: 36, design: .monospaced))
+            .font(.system(.largeTitle, design: .monospaced))
             .fontWeight(.heavy)
             .minimumScaleFactor(0.5)
             .lineLimit(1)
@@ -113,14 +115,4 @@ struct OTPWidgetSmallView: View {
         case .totp, .unavailable, .placeholder: nil
         }
     }
-
-    private var issuerFont: Font {
-        let length = displayIssuer.count
-        switch length {
-        case 0 ... 20: return .title3.weight(.bold)
-        case 21 ... 35: return .system(size: 18, weight: .bold)
-        case 36 ... 50: return .system(size: 16, weight: .bold)
-        default: return .system(size: 14, weight: .bold)
-        }
-    }
 }