solve UI scaling problems

LocalPackages/DuckUI/Sources/DuckUI/Button.swift

@@ -40,6 +40,9 @@ public struct PrimaryButtonStyle: ButtonStyle {
         let foregroundColor = disabled ? disabledForegroundColor : standardForegroundColor
 
         configuration.label
+            .fixedSize(horizontal: false, vertical: true)
+            .multilineTextAlignment(.center)
+            .lineLimit(nil)
             .font(Font(UIFont.boldAppFont(ofSize: compact ? Consts.fontSize - 1 : Consts.fontSize)))
             .foregroundColor(configuration.isPressed ? standardForegroundColor.opacity(Consts.pressedOpacity) : foregroundColor)
             .padding()

LocalPackages/SyncUI/Sources/SyncUI/Resources/en.lproj/Localizable.strings

@@ -26,7 +26,7 @@
 "cancel.button" = "Cancel";
 
 /* Connect With Server Sheet - Button */
-"connect.with.server.sheet.button" = "Turn on Sync & Backup";
+"connect.with.server.sheet.button" = "Turn On Sync & Back Up";
 
 /* Connect With Server Sheet - Description Part 1 */
 "connect.with.server.sheet.description.part1" = "This creates an encrypted backup of your bookmarks and passwords on DuckDuckGo’s secure server, which can be synced with your other devices.";
@@ -50,7 +50,7 @@
 "delete.server.data" = "Turn Off and Delete Server Data...";
 
 /* Device SyncedSheet - Title */
-"device.synced.sheet.title" = "Your Data is Synced!";
+"device.synced.sheet.title" = "Your data is synced!";
 
 /* Standard Buttons - Done Button */
 "done.button" = "Done";
@@ -184,9 +184,6 @@
 /* Scan or See Code View - Instruction with syncMenuPath */
 "scan.or.see.code.instruction.attributed" = "Go to %@ in the DuckDuckGo Browser on another device and select ”Sync with Another Device.”.";
 
-/* Scan or See Code View - Instruction Part 3 */
-"scan.or.see.code.instruction.part3" = "in the DuckDuckGo Browser on another device and select ”Sync with Another Device.”";
-
 /* Scan or See Code View - Manually Enter Code Link */
 "scan.or.see.code.manually.enter.code.link" = "Manually Enter Code";
 
@@ -227,7 +224,7 @@
 "sync.warning.sync.unavailable" = "Sync & Backup is Unavailable";
 
 /* Button label for syncing with another device */
-"sync.with.another.device.button" = "Sync with Another Device";
+"sync.with.another.device.button" = "Sync With Another Device";
 
 /* Footer message for syncing with another device */
 "sync.with.another.device.footer" = "Your data is end-to-end encrypted, and DuckDuckGo does not have access to the encryption key.";
@@ -257,7 +254,7 @@
 "unified.favorites.instruction" = "Use the same favorite bookmarks on all your devices. Leave off to keep mobile and desktop favorites separate.";
 
 /* Options - Unify Favorites Title */
-"unified.favorites.title" = "Unify Favorites";
+"unified.favorites.title" = "Unify Favorites Across Devices";
 
 /* View Text Code menu item */
 "view.text.code.menu.item" = "View Text Code";

LocalPackages/SyncUI/Sources/SyncUI/Views/Internal/CameraView.swift

@@ -96,12 +96,15 @@ public struct CameraView: View {
 
                 Text(UserText.cameraPermissionRequired)
                     .daxTitle3()
+                    .multilineTextAlignment(.center)
+                    .fixedSize(horizontal: false, vertical: true)
                     .lineSpacing(1.05)
                     .padding(.bottom, 8)
 
                 Text(UserText.cameraPermissionInstructions)
                     .lineLimit(nil)
                     .multilineTextAlignment(.center)
+                    .fixedSize(horizontal: false, vertical: true)
                     .daxBodyRegular()
                     .lineSpacing(1.1)
 

LocalPackages/SyncUI/Sources/SyncUI/Views/RecoverSyncedDataView.swift

@@ -63,6 +63,7 @@ public struct RecoverSyncedDataView: View {
             .buttonStyle(PrimaryButtonStyle())
             .frame(maxWidth: 360)
             .padding(.horizontal, 30)
+            .padding(.bottom, 8)
         }
     }
 }

LocalPackages/SyncUI/Sources/SyncUI/Views/SaveRecoveryKeyView.swift

@@ -100,6 +100,7 @@ public struct SaveRecoveryKeyView: View {
             : nil
         )
         .padding(.horizontal, 20)
+        .padding(.bottom, 8)
     }
 
     @ViewBuilder

LocalPackages/SyncUI/Sources/SyncUI/Views/ScanOrPasteCodeView.swift

@@ -31,24 +31,29 @@ public struct ScanOrSeeCode: View {
     }
 
     public var body: some View {
-        VStack(spacing: 10) {
-            VStack(spacing: 10) {
-                titleView()
-                CameraView(model: model)
-            }
-            .toolbar {
-                ToolbarItem(placement: .navigationBarLeading) {
-                    Button(UserText.cancelButton, action: model.cancel)
-                        .foregroundColor(Color.white)
+        GeometryReader { geometry in
+            ScrollView {
+                VStack(spacing: 10) {
+                    let heightFactor = geometry.size.width < 380 ? 1 : 0.84
+                    titleView()
+                    CameraView(model: model)
+                        .frame(width: geometry.size.width)
+                        .frame(minHeight: geometry.size.width * heightFactor)
+                    qrCodeView(width: geometry.size.width)
                 }
-                ToolbarItem(placement: .navigationBarTrailing) {
-                    NavigationLink(UserText.scanOrSeeCodeManuallyEnterCodeLink, destination: {
-                        PasteCodeView(model: model)
-                    })
-                    .foregroundColor(Color(designSystemColor: .accent))
+                .toolbar {
+                    ToolbarItem(placement: .navigationBarLeading) {
+                        Button(UserText.cancelButton, action: model.cancel)
+                            .foregroundColor(Color.white)
+                    }
+                    ToolbarItem(placement: .navigationBarTrailing) {
+                        NavigationLink(UserText.scanOrSeeCodeManuallyEnterCodeLink, destination: {
+                            PasteCodeView(model: model)
+                        })
+                        .foregroundColor(Color(designSystemColor: .accent))
+                    }
                 }
             }
-            qrCodeView()
         }
     }
 
@@ -85,15 +90,23 @@ public struct ScanOrSeeCode: View {
 
 
     @ViewBuilder
-    func qrCodeView() -> some View {
+    func qrCodeView(width: CGFloat) -> some View {
+        var maxWidth: CGFloat {
+            let basedOnScreenWidth = (width - 70) / 3 * 2
+            if width < 390 {
+                return basedOnScreenWidth
+            }
+            return 180
+        }
         VStack(spacing: 8) {
             HStack(alignment: .top, spacing: 20) {
                 QRCodeView(string: qrCodeModel.code ?? "", size: 120)
                 VStack(alignment: .leading, spacing: 10) {
                     HStack {
                         Text(UserText.scanOrSeeCodeScanCodeInstructionsTitle)
                             .daxBodyBold()
-                            .fixedSize()
+                            .fixedSize(horizontal: false, vertical: true)
+                            .multilineTextAlignment(.leading)
                         Spacer()
                         Image("SyncDeviceType_phone")
                             .padding(2)
@@ -107,24 +120,17 @@ public struct ScanOrSeeCode: View {
                         .fixedSize(horizontal: false, vertical: true)
                         .multilineTextAlignment(.leading)
                 }
+                .frame(maxWidth: maxWidth)
             }
+            .frame(width: width)
             .padding(20)
             .background(
                 RoundedRectangle(cornerRadius: 8)
                     .fill(Color(designSystemColor: .panel))
+                    .frame(width: width - 20)
             )
             .padding(20)
-            HStack {
-                Text(UserText.scanOrSeeCodeFooter)
-                HStack(alignment: .center) {
-                    Text(UserText.scanOrSeeCodeShareCodeLink)
-                        .foregroundColor(Color(designSystemColor: .accent))
-                        .onTapGesture {
-                            model.showShareCodeSheet()
-                        }
-                    Image("Arrow-Circle-Right-12")
-                }
-            }
+            cantScanView()
         }
         .padding(.bottom, 40)
         .onAppear {
@@ -134,5 +140,21 @@ public struct ScanOrSeeCode: View {
                 self.qrCodeModel = model.startConnectMode()
             }
         }
+        .frame(width: width)
+    }
+
+    @ViewBuilder
+    func cantScanView() -> some View {
+        HStack {
+            Text(UserText.scanOrSeeCodeFooter)
+            HStack(alignment: .center) {
+                Text(UserText.scanOrSeeCodeShareCodeLink)
+                    .foregroundColor(Color(designSystemColor: .accent))
+                    .onTapGesture {
+                        model.showShareCodeSheet()
+                    }
+                Image("Arrow-Circle-Right-12")
+            }
+        }
     }
 }

LocalPackages/SyncUI/Sources/SyncUI/Views/SyncWithServerView.swift

@@ -69,6 +69,7 @@ public struct SyncWithServerView: View {
                 .buttonStyle(PrimaryButtonStyle())
                 .frame(maxWidth: 360)
                 .padding(.horizontal, 30)
+                .padding(.bottom, 8)
                 Text(UserText.connectWithServerSheetFooter)
                     .daxFootnoteRegular()
                     .foregroundColor(Color(designSystemColor: .textSecondary))