Fixes too long desc and Token Balance Value (#2891) (#2902)

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;
 }

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>
         );
       });

js/src/ui/Container/Title/title.css

@@ -16,6 +16,9 @@
 */
 .byline {
   color: #aaa;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .title {

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>
     );