fix: long usernames push timestamp and right icons out of view (#7109)

Author: Rohit3523

app/containers/message/Message.stories.tsx

@@ -28,9 +28,22 @@ const author = {
 	username: 'diego.mello'
 };
 
+const shortNameAuthor = {
+	_id: 'userid1',
+	username: 'jd',
+	name: 'JD'
+};
+
+const mediumNameAuthor = {
+	_id: 'userid2',
+	username: 'john.doe',
+	name: 'John Doe'
+};
+
 const longNameAuthor = {
-	_id: 'userid',
-	username: 'Long name user looooong name user'
+	_id: 'userid3',
+	username: 'johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername',
+	name: 'John Doe With An Extremely Long Display Name That Should Definitely Be Truncated In Any Reasonable User Interface Layout'
 };
 
 const baseUrl = 'https://open.rocket.chat';
@@ -389,6 +402,91 @@ export const FullNameLargeFont = () => (
 	/>
 );
 
+export const Names = () => (
+	<>
+		<Message msg='Small name (2 chars)' author={shortNameAuthor} useRealName />
+		<Message
+			msg='Small name with icons'
+			author={shortNameAuthor}
+			useRealName
+			isEdited
+			isTranslated
+			pinned
+			type={E2E_MESSAGE_TYPE}
+			hasError
+			isReadReceiptEnabled
+			read
+		/>
+		<Message msg='Medium name (8 chars)' author={mediumNameAuthor} useRealName />
+		<Message
+			msg='Medium name with icons'
+			author={mediumNameAuthor}
+			useRealName
+			isEdited
+			isTranslated
+			pinned
+			type={E2E_MESSAGE_TYPE}
+			hasError
+			isReadReceiptEnabled
+			read
+		/>
+		<Message msg='Long name (22 chars) - should truncate' author={longNameAuthor} useRealName />
+		<Message
+			msg='Long name with icons - timestamp visible'
+			author={longNameAuthor}
+			useRealName
+			isEdited
+			isTranslated
+			pinned
+			type={E2E_MESSAGE_TYPE}
+			hasError
+			isReadReceiptEnabled
+			read
+		/>
+	</>
+);
+
+export const Usernames = () => (
+	<>
+		<Message msg='Small username (2 chars)' author={shortNameAuthor} />
+		<Message
+			msg='Small username with icons'
+			author={shortNameAuthor}
+			isEdited
+			isTranslated
+			pinned
+			type={E2E_MESSAGE_TYPE}
+			hasError
+			isReadReceiptEnabled
+			read
+		/>
+		<Message msg='Medium username (8 chars)' author={mediumNameAuthor} />
+		<Message
+			msg='Medium username with icons'
+			author={mediumNameAuthor}
+			isEdited
+			isTranslated
+			pinned
+			type={E2E_MESSAGE_TYPE}
+			hasError
+			isReadReceiptEnabled
+			read
+		/>
+		<Message msg='Long username (22 chars) - should truncate' author={longNameAuthor} />
+		<Message
+			msg='Long username with icons - timestamp visible'
+			author={longNameAuthor}
+			isEdited
+			isTranslated
+			pinned
+			type={E2E_MESSAGE_TYPE}
+			hasError
+			isReadReceiptEnabled
+			read
+		/>
+	</>
+);
+
 const msgMentions = '@rocket.cat @diego.mello @all @here #general @team';
 const mentions = [
 	{ _id: 'random', name: 'Rocket Cat', username: 'rocket.cat', type: 'user' },

app/containers/message/Time.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, type TextStyle } from 'react-native';
 
 import dayjs from '../../lib/dayjs';
 import { useTheme } from '../../theme';
@@ -8,16 +8,17 @@ import messageStyles from './styles';
 interface IMessageTime {
 	ts?: Date;
 	timeFormat?: string;
+	style?: TextStyle;
 }
 
-const MessageTime = ({ timeFormat, ts }: IMessageTime) => {
+const MessageTime = ({ timeFormat, ts, style }: IMessageTime) => {
 	'use memo';
 
 	const { colors } = useTheme();
 
 	const time = dayjs(ts).format(timeFormat);
 
-	return <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text>;
+	return <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }, style]}>{time}</Text>;
 };
 
 export default MessageTime;

app/containers/message/User.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { type MessageType, type MessageTypesValues, SubscriptionType } from '../../definitions';
 import { useTheme } from '../../theme';
@@ -10,7 +10,6 @@ import MessageContext from './Context';
 import { messageHaveAuthorName } from './utils';
 import MessageTime from './Time';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
-import Touch from '../Touch';
 
 const styles = StyleSheet.create({
 	container: {
@@ -117,12 +116,12 @@ const User = React.memo(
 
 			return (
 				<View style={styles.container}>
-					<Touch testID={`username-header-${username}`} style={styles.titleContainer} onPress={onUserPress}>
+					<Pressable testID={`username-header-${username}`} style={styles.titleContainer} onPress={onUserPress}>
 						<Text style={[styles.username, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{textContent}
 						</Text>
 						{isLargeFontScale ? null : <MessageTime timeFormat={timeFormat} ts={ts} />}
-					</Touch>
+					</Pressable>
 					<RightIcons
 						type={type}
 						isEdited={isEdited}