[iOS] - Fix layout of WrappingHStack when text becomes multi-line (#22608)

* Fix layout of WrappingHStack when text becomes multi-line.
* Also fix spacing between items in the wrapping HStack on iOS 15 when line becomes multi-line.

Signed-off-by: Brandon T <[email protected]>

Author: Brandon-T

ios/brave-ios/Sources/AIChat/Components/Messages/AIChatSuggestionsView.swift

@@ -3,8 +3,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import SwiftUI
 import DesignSystem
+import SwiftUI
 
 @available(iOS 16, *)
 struct WrappingHStack: Layout {
@@ -15,52 +15,62 @@ struct WrappingHStack: Layout {
     guard !subviews.isEmpty else {
       return .zero
     }
-    
+
     let height = subviews.map { $0.sizeThatFits(proposal).height }.max() ?? 0.0
-    
+
     var rowWidths = [CGFloat]()
     var currentRowWidth: CGFloat = 0
     subviews.forEach { subview in
-      if currentRowWidth + hSpacing + subview.sizeThatFits(proposal).width >= proposal.width ?? 0.0 {
+      if currentRowWidth + hSpacing + subview.sizeThatFits(proposal).width >= proposal.width ?? 0.0
+      {
         rowWidths.append(currentRowWidth)
         currentRowWidth = subview.sizeThatFits(proposal).width
       } else {
         currentRowWidth += hSpacing + subview.sizeThatFits(proposal).width
       }
     }
-    
+
     rowWidths.append(currentRowWidth)
-    
+
     let rowCount = CGFloat(rowWidths.count)
-    return CGSize(width: max(rowWidths.max() ?? 0.0, proposal.width ?? 0.0), height: rowCount * height + (rowCount - 1) * vSpacing)
+    return CGSize(
+      width: max(rowWidths.max() ?? 0.0, proposal.width ?? 0.0),
+      height: rowCount * height + (rowCount - 1) * vSpacing
+    )
   }
 
-  func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+  func placeSubviews(
+    in bounds: CGRect,
+    proposal: ProposedViewSize,
+    subviews: Subviews,
+    cache: inout ()
+  ) {
     let height = subviews.map { $0.dimensions(in: proposal).height }.max() ?? 0.0
-    
+
     guard !subviews.isEmpty else {
       return
     }
-    
+
     var x = bounds.minX
-    var y = height / 2.0 + bounds.minY
-    
+    var y = height + bounds.minY
+
     subviews.forEach { subview in
       x += subview.dimensions(in: proposal).width / 2.0
-      
+
       if x + subview.dimensions(in: proposal).width / 2.0 > bounds.maxX {
         x = bounds.minX + subview.dimensions(in: proposal).width / 2.0
-        y += height + vSpacing
+        y += subview.dimensions(in: proposal).height + vSpacing
       }
-      
-      subview.place(at: CGPoint(x: x, y: y),
-                    anchor: .center,
-                    proposal: ProposedViewSize(
-                      width: subview.dimensions(in: proposal).width,
-                      height: subview.dimensions(in: proposal).height
-                    )
+
+      subview.place(
+        at: CGPoint(x: x, y: y),
+        anchor: .init(x: 0.5, y: 1.0),
+        proposal: ProposedViewSize(
+          width: subview.dimensions(in: proposal).width,
+          height: subview.dimensions(in: proposal).height
+        )
       )
-      
+
       x += subview.dimensions(in: proposal).width / 2.0 + hSpacing
     }
   }
@@ -69,24 +79,30 @@ struct WrappingHStack: Layout {
 @available(iOS, introduced: 15.0, obsoleted: 16.0)
 struct WrappingHStackOld<Model, V>: View where Model: Hashable, V: View {
   typealias ViewGenerator = (Model) -> V
-    
+
   var models: [Model]
   var hSpacing: CGFloat
   var vSpacing: CGFloat
   var viewGenerator: ViewGenerator
   var proxy: GeometryProxy
 
   @State private var viewHeight = CGFloat.infinity
-  
+
   init(geometry: GeometryProxy, models: [Model], viewGenerator: @escaping ViewGenerator) {
     self.models = models
     self.viewGenerator = viewGenerator
     self.hSpacing = 2.0
     self.vSpacing = 2.0
     self.proxy = geometry
   }
-  
-  init(geometry: GeometryProxy, models: [Model], hSpacing: Float, vSpacing: Float, viewGenerator: @escaping ViewGenerator) {
+
+  init(
+    geometry: GeometryProxy,
+    models: [Model],
+    hSpacing: Float,
+    vSpacing: Float,
+    viewGenerator: @escaping ViewGenerator
+  ) {
     self.models = models
     self.viewGenerator = viewGenerator
     self.hSpacing = CGFloat(hSpacing)
@@ -108,25 +124,29 @@ struct WrappingHStackOld<Model, V>: View where Model: Hashable, V: View {
     ZStack(alignment: .topLeading) {
       ForEach(models, id: \.self) { model in
         viewGenerator(model)
-          .padding(.horizontal, hSpacing)
-          .padding(.vertical, vSpacing)
-          .alignmentGuide(.leading, computeValue: { dimension in
-            if abs(width - dimension.width) > geometry.size.width {
-              width = 0.0
-              height -= dimension.height
+          .alignmentGuide(
+            .leading,
+            computeValue: { dimension in
+              if abs(width - dimension.width) > geometry.size.width {
+                width = 0.0
+                height -= dimension.height + vSpacing
+              }
+
+              let result = width
+              width = model == models.last! ? 0.0 : width - dimension.width - hSpacing
+              return result
             }
-            
-            let result = width
-            width = model == models.last! ? 0.0 : width - dimension.width
-            return result
-          })
-          .alignmentGuide(.top, computeValue: { dimension in
-            let result = height
-            if model == models.last! {
-              height = 0.0
+          )
+          .alignmentGuide(
+            .top,
+            computeValue: { dimension in
+              let result = height + dimension.height
+              if model == models.last! {
+                height = 0.0
+              }
+              return result
             }
-            return result
-          })
+          )
       }
     }
   }
@@ -136,7 +156,7 @@ struct AIChatSuggestionsButton: View {
   var title: String
   var isLoading: Bool
   var onSuggestionPressed: (() -> Void)?
-  
+
   var body: some View {
     Button {
       onSuggestionPressed?()
@@ -147,7 +167,7 @@ struct AIChatSuggestionsButton: View {
           .foregroundColor(Color(braveSystemName: .textInteractive))
           .multilineTextAlignment(.leading)
           .padding(12.0)
-        
+
         if isLoading {
           ProgressView()
             .tint(Color(braveSystemName: .textInteractive))
@@ -168,8 +188,12 @@ struct AIChatSuggestionsView: View {
   var suggestions: [String]
   var onSuggestionPressed: ((String) -> Void)?
   private var proxy: GeometryProxy
-  
-  init(geometry: GeometryProxy, suggestions: [String], onSuggestionPressed: ((String) -> Void)? = nil) {
+
+  init(
+    geometry: GeometryProxy,
+    suggestions: [String],
+    onSuggestionPressed: ((String) -> Void)? = nil
+  ) {
     self.suggestions = suggestions
     self.proxy = geometry
     self.onSuggestionPressed = onSuggestionPressed
@@ -201,10 +225,13 @@ struct AIChatSuggestionsView_Preview: PreviewProvider {
     GeometryReader { geometry in
       AIChatSuggestionsView(
         geometry: geometry,
-        suggestions: ["What Bluetooth version does it use?",
-                      "Summarize this page?",
-                      "What is Leo?",
-                      "What can the Leo assistant do for me?"])
+        suggestions: [
+          "What Bluetooth version does it use?",
+          "Summarize this page?",
+          "What is Leo?",
+          "What can the Leo assistant do for me?",
+        ]
+      )
       .previewLayout(.sizeThatFits)
     }
   }