From 32fd8e3cdadeb20721fcf1fecf60ec183d29d5f5 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 4 May 2022 12:15:13 -0400
Subject: [PATCH] Add ellipsis to server displayName & url (#6223)

---
 .../__snapshots__/index.test.tsx.snap         |  5 +++++
 .../header/__snapshots__/header.test.tsx.snap |  3 +++
 .../categories_list/header/header.tsx         |  5 +++++
 .../servers_list/server_item/server_item.tsx  | 19 ++++++++++++++++---
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
index 5f93ac04f8..2fb63e9c89 100644
--- a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
@@ -149,6 +149,8 @@ exports[`components/categories_list should render channels error 1`] = `
       </View>
     </View>
     <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
       style={
         Object {
           "color": "rgba(255,255,255,0.64)",
@@ -156,6 +158,7 @@ exports[`components/categories_list should render channels error 1`] = `
           "fontSize": 11,
           "fontWeight": "600",
           "lineHeight": 16,
+          "paddingRight": 30,
         }
       }
       testID="channel_list_header.server_display_name"
@@ -346,6 +349,8 @@ exports[`components/categories_list should render team error 1`] = `
         }
       >
         <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
           style={
             Object {
               "color": "rgba(255,255,255,0.64)",
diff --git a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
index c6c0f76e8e..749bae682c 100644
--- a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
@@ -129,6 +129,8 @@ exports[`components/channel_list/header Channel List Header Component should mat
     </View>
   </View>
   <Text
+    ellipsizeMode="tail"
+    numberOfLines={1}
     style={
       Object {
         "color": "rgba(255,255,255,0.64)",
@@ -136,6 +138,7 @@ exports[`components/channel_list/header Channel List Header Component should mat
         "fontSize": 11,
         "fontWeight": "600",
         "lineHeight": 16,
+        "paddingRight": 30,
       }
     }
     testID="channel_list_header.server_display_name"
diff --git a/app/screens/home/channel_list/categories_list/header/header.tsx b/app/screens/home/channel_list/categories_list/header/header.tsx
index ba9b36c646..ccc58d46aa 100644
--- a/app/screens/home/channel_list/categories_list/header/header.tsx
+++ b/app/screens/home/channel_list/categories_list/header/header.tsx
@@ -37,6 +37,7 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
     },
     subHeadingStyles: {
         color: changeOpacity(theme.sidebarText, 0.64),
+        paddingRight: 30,
         ...typography('Heading', 50),
     },
     headerRow: {
@@ -168,6 +169,8 @@ const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, ico
                     </TouchableWithFeedback>
                 </View>
                 <Text
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
                     style={styles.subHeadingStyles}
                     testID='channel_list_header.server_display_name'
                 >
@@ -180,6 +183,8 @@ const ChannelListHeader = ({canCreateChannels, canJoinChannels, displayName, ico
             <View style={styles.noTeamHeaderRow}>
                 <View style={styles.noTeamHeaderRow}>
                     <Text
+                        numberOfLines={1}
+                        ellipsizeMode='tail'
                         style={styles.noTeamHeadingStyles}
                         testID='channel_list_header.team_display_name'
                     >
diff --git a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
index 9cd9ab8ccc..7a435d36fc 100644
--- a/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
+++ b/app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
@@ -60,7 +60,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         flex: 1,
         height: 72,
         justifyContent: 'center',
-        paddingHorizontal: 18,
+        paddingLeft: 18,
     },
     container: {
         alignItems: 'center',
@@ -72,6 +72,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
     details: {
         marginLeft: 14,
+        flex: 1,
     },
     logout: {
         backgroundColor: theme.centerChannelBg,
@@ -354,8 +355,20 @@ const ServerItem = ({highlight, isActive, server, tutorialWatched}: Props) => {
                             />
                             }
                             <View style={styles.details}>
-                                <Text style={styles.name}>{displayName}</Text>
-                                <Text style={styles.url}>{removeProtocol(stripTrailingSlashes(server.url))}</Text>
+                                <Text
+                                    numberOfLines={1}
+                                    ellipsizeMode='tail'
+                                    style={styles.name}
+                                >
+                                    {displayName}
+                                </Text>
+                                <Text
+                                    numberOfLines={1}
+                                    ellipsizeMode='tail'
+                                    style={styles.url}
+                                >
+                                    {removeProtocol(stripTrailingSlashes(server.url))}
+                                </Text>
                             </View>
                         </View>
                         {!server.lastActiveAt && !switching &&