From bc91287f950c1a9405890e454ea9e9ab952d5269 Mon Sep 17 00:00:00 2001
From: ptchaya_p <ptchaya.p@gmail.com>
Date: Sun, 22 Sep 2024 00:55:31 +0700
Subject: [PATCH] fix: ASC-25825 - fix witdh of clickable area

---
 src/screens/ChatRoom/ChatRoom.tsx | 18 +++++++++++-------
 src/screens/ChatRoom/styles.ts    |  8 ++++++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/screens/ChatRoom/ChatRoom.tsx b/src/screens/ChatRoom/ChatRoom.tsx
index 64885c7..ef88f7d 100644
--- 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
index 90d3382..53f5e91 100644
--- 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',