Allow emotes in the menu to scroll if their size overflows the container (#2780)

ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift

@@ -137,6 +137,8 @@ struct TimelineItemMenu: View {
     @EnvironmentObject private var context: RoomScreenViewModel.Context
     @Environment(\.dismiss) private var dismiss
     
+    @State private var reactionsFrame = CGRect.zero
+    
     let item: EventBasedTimelineItemProtocol
     let actions: TimelineItemMenuActions
     private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
@@ -212,28 +214,33 @@ struct TimelineItemMenu: View {
     }
     
     private var reactionsSection: some View {
-        HStack(alignment: .center, spacing: 8) {
+        ScrollView(.horizontal) {
-            reactionButton(for: "👍️")
+            HStack(alignment: .center, spacing: 8) {
-            reactionButton(for: "👎️")
+                reactionButton(for: "👍️")
-            reactionButton(for: "🔥")
+                reactionButton(for: "👎️")
-            reactionButton(for: "❤️")
+                reactionButton(for: "🔥")
-            reactionButton(for: "👏")
+                reactionButton(for: "❤️")
-            
+                reactionButton(for: "👏")
-            Button {
+                
-                dismiss()
+                Button {
-                // Otherwise we get errors that a sheet is already presented
+                    dismiss()
-                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    // Otherwise we get errors that a sheet is already presented
-                    context.send(viewAction: .displayEmojiPicker(itemID: item.id))
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                        context.send(viewAction: .displayEmojiPicker(itemID: item.id))
+                    }
+                } label: {
+                    CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
+                        .foregroundColor(.compound.iconSecondary)
+                        .padding(10)
                 }
-            } label: {
+                .accessibilityLabel(L10n.actionReact)
-                CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
-                    .foregroundColor(.compound.iconSecondary)
-                    .padding(10)
             }
-            .accessibilityLabel(L10n.actionReact)
+            .padding(.horizontal)
+            .frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center)
         }
-        .padding(.horizontal)
+        .scrollIndicators(.hidden)
-        .frame(maxWidth: .infinity, alignment: .center)
+        .scrollBounceBehavior(.basedOnSize, axes: .horizontal)
+        .readFrame($reactionsFrame)
     }
     
     private func reactionButton(for emoji: String) -> some View {
@@ -243,11 +250,11 @@ struct TimelineItemMenu: View {
             context.send(viewAction: .toggleReaction(key: emoji, itemID: item.id))
         } label: {
             Text(emoji)
-                .padding(8)
                 .font(.compound.headingLG)
+                .padding(8)
                 .background(Circle()
                     .foregroundColor(reactionBackgroundColor(for: emoji)))
-            Spacer()
+                .frame(maxWidth: .infinity, alignment: .leading)
         }
     }
     
@@ -284,6 +291,15 @@ struct TimelineItemMenu_Previews: PreviewProvider, TestablePreview {
     static let viewModel = RoomScreenViewModel.mock
 
     static var previews: some View {
+        testView
+            .previewDisplayName("With button shapes off")
+        testView
+            .environment(\._accessibilityShowButtonShapes, true)
+            .previewDisplayName("With button shapes on")
+    }
+    
+    @ViewBuilder
+    static var testView: some View {
         if let item = RoomTimelineItemFixtures.singleMessageChunk.first as? EventBasedTimelineItemProtocol,
            let actions = TimelineItemMenuActions(actions: [.copy, .edit, .reply(isThread: false), .redact], debugActions: [.viewSource]) {
             TimelineItemMenu(item: item, actions: actions)

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.1.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8a388d86979e8d51df6d2ddcf375edab9cd588e568dd3db8408eb3306e86a941
-size 147617

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-off.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0ae30b3ff2726a57ccd497ad37525bcafafb0c264371f0356454259a89a3b7e0
+size 147308

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-en-GB.With-button-shapes-on.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6ea3f6b0e1a784d00458ba1c7cab1b19d9eacca6f96071a9443f16e6df1e8bbe
+size 162209

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.1.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0b3cea06a5f1eebfd14df2dba18a39be3240d7e357383d1993b416ee0eecc8a3
-size 165356

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-off.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5972bea0c547c645dbb17adfaf8a0088b104624fa33ce364cb7bf02a8dabdd56
+size 165078

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPad-pseudo.With-button-shapes-on.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ca8610b52c724efe20b297959ca948d5dd86b6a28537b3c04188c9a156de37fc
+size 181743

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.1.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5477c2ecae338a04d35489f02793688b1f497ffd91eeb12937ae3a1acfa0cf36
-size 94928

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-off.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a6fda8d28f79dca8ea6376a500d2efd95dd82a2f0dd7b822062d7afcce49c97
+size 94163

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-en-GB.With-button-shapes-on.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:00c43663a92dc2edcc95025b668c5c862679762103596aa4fca0053034cba064
+size 103164

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.1.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f467b2dcdc5d6b2835a4da3177ab3db28a934f0ed2a078002202a11766bed887
-size 109995

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-off.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6417fa4b4c302bd91c30bd1e1fbf41dda7bd9d9daf7578344df51670e00a855c
+size 109302

PreviewTests/__Snapshots__/PreviewTests/test_timelineItemMenu-iPhone-15-pseudo.With-button-shapes-on.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6350123c47ec044d1ada486b04d84c5deebe6c9234e405f682795138fbd277b0
+size 119436

changelog.d/2406.bugfix

@@ -0,0 +1 @@
+If button shapes are enabled, emojis are now displayed properly in the menu.