From e3bb5d0fb5e64205c2c3a8f74f5c65dae4654096 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 30 Jan 2019 19:39:23 +0100
Subject: [PATCH] truncate long channel names on file page

---
 app/src/component/link/view.js | 10 +++++++++-
 app/src/page/file/view.js      | 14 ++++++++------
 app/src/styles/filePage.js     |  1 +
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/src/component/link/view.js b/app/src/component/link/view.js
index d0d73487..af1b78dd 100644
--- a/app/src/component/link/view.js
+++ b/app/src/component/link/view.js
@@ -35,6 +35,8 @@ export default class Link extends React.PureComponent {
 
   render() {
     const {
+      ellipsizeMode,
+      numberOfLines,
       onPress,
       style,
       text
@@ -54,7 +56,13 @@ export default class Link extends React.PureComponent {
     }
 
     return (
-      <Text style={styles} onPress={onPress ? onPress : this.handlePress}>{text}</Text>
+      <Text
+        style={styles}
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsizeMode}
+        onPress={onPress ? onPress : this.handlePress}>
+        {text}
+      </Text>
     );
   }
 };
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index b30ab0c6..59f605a0 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -568,12 +568,14 @@ class FilePage extends React.PureComponent {
                   {channelName &&
                     <View style={filePageStyle.channelRow}>
                       <Link style={filePageStyle.channelName}
-                                        selectable={true}
-                                        text={channelName}
-                                        onPress={() => {
-                                          const channelUri = normalizeURI(channelName);
-                                          navigateToUri(navigation, channelUri);
-                                        }} />
+                            selectable={true}
+                            text={channelName}
+                            numberOfLines={1}
+                            ellipsizeMode={"tail"}
+                            onPress={() => {
+                              const channelUri = normalizeURI(channelName);
+                              navigateToUri(navigation, channelUri);
+                            }} />
                       <View style={filePageStyle.subscriptionRow}>
                         <SubscribeButton
                           style={filePageStyle.actionButton}
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index 2244d498..0de275d1 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -74,6 +74,7 @@ const filePageStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 20,
     marginTop: 6,
+    width: '49%',
     color: Colors.LbryGreen
   },
   description: {