fix: ellipsis name in the message (QM-1788, QM-1790)

Author: bang9

packages/uikit-react-native/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -18,7 +18,7 @@ const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   return (
     <View style={styles.sender}>
       {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>
+        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

packages/uikit-react-native/src/components/MessageRenderer/index.tsx

@@ -107,9 +107,9 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
             </View>
           )}
           {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}
-          <View>
+          <View style={styles.bubbleContainer}>
             {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}
-            <View style={styles.bubbleContainer}>
+            <View style={styles.bubbleWrapper}>
               {messageComponent}
               {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}
             </View>
@@ -150,6 +150,9 @@ const styles = createStyleSheet({
     maxWidth: 240,
   },
   bubbleContainer: {
+    flexShrink: 1,
+  },
+  bubbleWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end',
   },