From f7259c26d167e782f384edc73addfc2fad51e3eb Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Wed, 26 Oct 2016 21:25:03 +0200
Subject: [PATCH] Fixes too long desc and Token Balance Value (#2891) (#2902)

---
 js/src/ui/Balance/balance.css       | 18 ++++++++++++------
 js/src/ui/Balance/balance.js        |  5 ++++-
 js/src/ui/Container/Title/title.css |  3 +++
 js/src/ui/Container/Title/title.js  |  2 +-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/js/src/ui/Balance/balance.css b/js/src/ui/Balance/balance.css
index 6f9b7bb21..6fe1b2a51 100644
--- a/js/src/ui/Balance/balance.css
+++ b/js/src/ui/Balance/balance.css
@@ -32,19 +32,25 @@
   border-radius: 16px;
   margin: 0.75em 0.5em 0 0;
   max-height: 24px;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .balance img {
-  display: inline-block;
   height: 32px;
   margin: -4px 1em 0 0;
   width: 32px;
 }
 
-.balance div {
-  display: inline-block;
-  /*font-family: 'Roboto Mono', monospace;*/
-  line-height: 24px;
+.balanceValue {
   margin: 0 1em 0 0;
-  vertical-align: top;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.balanceTag {
+  font-size: 0.85em;
+  padding-right: 0.75rem;
 }
diff --git a/js/src/ui/Balance/balance.js b/js/src/ui/Balance/balance.js
index b9df3e9fb..b6f786648 100644
--- a/js/src/ui/Balance/balance.js
+++ b/js/src/ui/Balance/balance.js
@@ -56,7 +56,10 @@ class Balance extends Component {
             <img
               src={ imagesrc }
               alt={ token.name } />
-            <div>{ value }<small> { token.tag }</small></div>
+            <div className={ styles.balanceValue }>
+              <span title={ value }> { value } </span>
+            </div>
+            <div className={ styles.balanceTag }> { token.tag } </div>
           </div>
         );
       });
diff --git a/js/src/ui/Container/Title/title.css b/js/src/ui/Container/Title/title.css
index c3bf7a3b1..ee5cc58cd 100644
--- a/js/src/ui/Container/Title/title.css
+++ b/js/src/ui/Container/Title/title.css
@@ -16,6 +16,9 @@
 */
 .byline {
   color: #aaa;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .title {
diff --git a/js/src/ui/Container/Title/title.js b/js/src/ui/Container/Title/title.js
index 2acfc30bb..0c0d0e6b3 100644
--- a/js/src/ui/Container/Title/title.js
+++ b/js/src/ui/Container/Title/title.js
@@ -40,7 +40,7 @@ export default class Title extends Component {
           { this.props.title }
         </h3>
         <div className={ styles.byline }>
-          { this.props.byline }
+          <span title={ this.props.byline }>{ this.props.byline }</span>
         </div>
       </div>
     );