From ff133a03df8aedda960ee751b80c7bd176008bf9 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 14 Nov 2017 12:56:24 -0500
Subject: [PATCH] Issue #721 fix - Inconsistent thumbnail sizes

---
 CHANGELOG.md                              | 2 +-
 ui/js/component/uriIndicator/view.jsx     | 2 +-
 ui/scss/component/_channel-indicator.scss | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f096ace72..4d3c33a0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Fixed
-  *
+  * Long channel names causing inconsistent thumbnail sizes (#721)
   *
 
 ### Deprecated
diff --git a/ui/js/component/uriIndicator/view.jsx b/ui/js/component/uriIndicator/view.jsx
index f9c9dc779..bff2cbf97 100644
--- a/ui/js/component/uriIndicator/view.jsx
+++ b/ui/js/component/uriIndicator/view.jsx
@@ -60,7 +60,7 @@ class UriIndicator extends React.PureComponent {
 
     const inner = (
       <span>
-        {channelName} {" "}
+        <span className="channel-name">{channelName}</span> {" "}
         {!signatureIsValid
           ? <Icon
               icon={icon}
diff --git a/ui/scss/component/_channel-indicator.scss b/ui/scss/component/_channel-indicator.scss
index 2e80c096e..58196e1be 100644
--- a/ui/scss/component/_channel-indicator.scss
+++ b/ui/scss/component/_channel-indicator.scss
@@ -1,4 +1,12 @@
 
+.channel-name {
+  width: calc(var(--card-small-width) * 2 / 3);
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis
+}
+
 .channel-indicator__icon--invalid {
   color: var(--color-error);
 }
-- 
2.45.3