Suggestions view design improvements (#1955)

* snapshot tests

* making the padding of the composer internal

* setting the max width using the line fragment

* setting the max width using the line fragment

* Update ElementX/Sources/Screens/ComposerToolbar/View/CompletionSuggestionView.swift

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

* updated tests and pr suggestions

* better stencil

---------

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

ElementX/Sources/Other/Pills/PillConstants.swift

@@ -25,5 +25,6 @@ enum PillConstants {
     /// Used by the WYSIWYG as the urlString value to identify @room mentions
     static let composerAtRoomURLString = "#"
     
-    static let maxWidth: CGFloat = 235
+    /// Used only to mock the max width in previews since the real max width is calculated by the line fragment width
+    static let mockMaxWidth: CGFloat = 235
 }

ElementX/Sources/Other/Pills/PillTextAttachment.swift

@@ -33,6 +33,7 @@ final class PillTextAttachment: NSTextAttachment {
         let fontData = pillData.fontData
         // Align the pill text vertically with the surrounding text.
         rect.origin.y = fontData.descender + (fontData.lineHeight - rect.height) / 2.0
+        rect.size.width = min(rect.size.width, lineFrag.width)
         return rect
     }
 }

ElementX/Sources/Other/Pills/PillView.swift

@@ -42,7 +42,6 @@ struct PillView: View {
         .padding(.trailing, 6)
         .padding(.vertical, 1)
         .background { Capsule().foregroundColor(backgroundColor) }
-        .frame(maxWidth: PillConstants.maxWidth)
         .onChange(of: context.viewState.displayText) { _ in
             didChangeText()
         }
@@ -55,18 +54,23 @@ struct PillView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadUser(isOwn: false))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loading")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadUser(isOwn: true))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loading Own")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadedUser(isOwn: false))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loaded Long")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadedUser(isOwn: true))) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("Loaded Long Own")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .allUsers)) { }
+            .frame(maxWidth: PillConstants.mockMaxWidth)
             .previewDisplayName("All Users")
     }
 }