Merge pull request #4428 from MetaMask/fix-tokenlist-balance-overflow

Token name is not hidden in wallet if balance is exceptionally long.

2 files changed, 13 insertions, 4 deletions

diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index c84117d84..4100d76a5 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -101,8 +101,8 @@ TokenCell.prototype.render = function () {
 
       h('div.token-list-item__balance-ellipsis', null, [
         h('div.token-list-item__balance-wrapper', null, [
-          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
-
+          h('div.token-list-item__token-balance', `${string || 0}`),
+          h('div.token-list-item__token-symbol', symbol),
           showFiat && h('div.token-list-item__fiat-amount', {
             style: {},
           }, formattedFiat),
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index e8de317e3..72fda372f 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -14,10 +14,17 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   min-width: 0;
 
   &__token-balance {
-    font-size: 1.5rem;
+    margin-right: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &__token-balance, &__token-symbol {
+    font-size: 1.5rem;
+    flex: 0 0 auto;
 
     @media #{$wallet-balance-breakpoint-range} {
       font-size: 95%;
@@ -66,7 +73,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   }
 
   &__balance-wrapper {
-    flex: 1 1 auto;
+    flex: 1;
+    flex-flow: row wrap;
+    display: flex;
     min-width: 0;
   }
 }