fix: ASC-25825 - fix witdh of clickable area

AmityCo · Sep 23, 2024 · bc91287 · bc91287
1 parent 8856e6b
commit bc91287
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/screens/ChatRoom/ChatRoom.tsx b/src/screens/ChatRoom/ChatRoom.tsx
@@ -395,7 +395,13 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
                 </View>
               </View>
             ) : (
-              <Menu>
+              <Menu
+                style={[
+                  isUserChat
+                    ? styles.currentUserMessage
+                    : styles.friendUserMessage,
+                ]}
+              >
                 <MenuTrigger
                   onAlternativeAction={() =>
                     openFullImage(message.image as string, message.messageType)
@@ -445,12 +451,10 @@ const ChatRoom: ChatRoomScreenComponentType = ({ route }) => {
                   customStyles={{
                     optionsContainer: {
                       ...styles.optionsContainer,
-                      marginLeft: isUserChat
-                        ? 240 +
-                          (message.text && message.text.length < 5
-                            ? message.text.length * 10
-                            : 10)
-                        : 0,
+                      marginTop:
+                        isUserChat && message.messageType === 'text'
+                          ? -75
+                          : -50,
                     },
                   }}
                 >

diff --git a/src/screens/ChatRoom/styles.ts b/src/screens/ChatRoom/styles.ts
@@ -29,11 +29,15 @@ export const useStyles = () => {
       marginVertical: 5,
       borderRadius: 10,
     },
-    userBubble: {
+    currentUserMessage: {
       alignSelf: 'flex-end',
+    },
+    friendUserMessage: {
+      alignSelf: 'flex-start',
+    },
+    userBubble: {
       backgroundColor: theme.colors.chatBubbles?.userBubble,
       maxWidth: '100%',
-      marginLeft: 60,
     },
     userMessageDelete: {
       alignSelf: 'flex-end',