align file import instructions with numbers in circles by top

duckduckgo · Dec 15, 2023 · 252ef22 · 252ef22
1 parent e452806
commit 252ef22
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/DuckDuckGo/DataImport/View/FileImportView.swift b/DuckDuckGo/DataImport/View/FileImportView.swift
@@ -736,14 +736,15 @@ struct InstructionsView: View {
     var body: some View {
         VStack(alignment: .leading, spacing: 8) {
             ForEach(instructions.indices, id: \.self) { i in
-                HStack(spacing: 8) {
+                HStack(alignment: .top, spacing: 8) {
                     ForEach(instructions[i].indices, id: \.self) { j in
                         switch instructions[i][j] {
                         case .lineNumber(let number):
                             CircleNumberView(number: number)
                         case .textItems(let textParts):
                             Text(textParts)
                                 .makeSelectable()
+                                .frame(minHeight: CircleNumberView.Constants.diameter)
                         case .view(let view):
                             view
                         }
@@ -794,12 +795,16 @@ private extension Text {
 
 struct CircleNumberView: View {
 
+    enum Constants {
+        static let diameter: CGFloat = 20
+    }
+
     let number: Int
 
     var body: some View {
         Circle()
             .fill(.globalBackground)
-            .frame(width: 20, height: 20)
+            .frame(width: Constants.diameter, height: Constants.diameter)
             .overlay(
                 Text("\(number)")
                     .foregroundColor(.onboardingActionButton)