From 251ef0992bbe7e839f7ca9e3f297683bb4f237c6 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 5 May 2022 08:53:27 -0400
Subject: [PATCH] Fix create direct message styles (#6224)

---
 app/components/user_list_row/index.tsx        | 35 +++++++++----------
 .../selected_users/selected_user.tsx          |  4 +--
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/components/user_list_row/index.tsx b/app/components/user_list_row/index.tsx
index ed5f8d44ee..edb8b3b71b 100644
--- a/app/components/user_list_row/index.tsx
+++ b/app/components/user_list_row/index.tsx
@@ -42,7 +42,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             color: theme.centerChannelColor,
         },
         textContainer: {
-            marginLeft: 10,
+            paddingHorizontal: 10,
             justifyContent: 'center',
             flexDirection: 'column',
             flex: 1,
@@ -54,6 +54,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
         username: {
             fontSize: 15,
             color: theme.centerChannelColor,
+            maxWidth: '80%',
         },
         indicatorContainer: {
             flexDirection: 'row',
@@ -169,23 +170,21 @@ export default function UserListRow({
                     />
                 </View>
                 <View style={style.textContainer}>
-                    <View>
-                        <View style={style.indicatorContainer}>
-                            <Text
-                                style={style.username}
-                                ellipsizeMode='tail'
-                                numberOfLines={1}
-                                testID={displayNameTestID}
-                            >
-                                {usernameDisplay}
-                            </Text>
-                            <BotTag
-                                show={Boolean(user.is_bot)}
-                            />
-                            <GuestTag
-                                show={isGuest(user.roles)}
-                            />
-                        </View>
+                    <View style={style.indicatorContainer}>
+                        <Text
+                            style={style.username}
+                            ellipsizeMode='tail'
+                            numberOfLines={1}
+                            testID={displayNameTestID}
+                        >
+                            {usernameDisplay}
+                        </Text>
+                        <BotTag
+                            show={Boolean(user.is_bot)}
+                        />
+                        <GuestTag
+                            show={isGuest(user.roles)}
+                        />
                     </View>
                     {showTeammateDisplay &&
                     <View>
diff --git a/app/screens/create_direct_message/selected_users/selected_user.tsx b/app/screens/create_direct_message/selected_users/selected_user.tsx
index 3b27e72220..8f32d13db9 100644
--- a/app/screens/create_direct_message/selected_users/selected_user.tsx
+++ b/app/screens/create_direct_message/selected_users/selected_user.tsx
@@ -42,8 +42,8 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
             alignItems: 'center',
+            justifyContent: 'center',
             flexDirection: 'row',
-            height: 32,
             borderRadius: 16,
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
             marginBottom: 8,
@@ -57,8 +57,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
         },
         text: {
             color: theme.centerChannelColor,
-            textAlignVertical: 'center',
-            height: 32,
             ...typography('Body', 100, 'SemiBold'),
         },
     };