Handle large token balances in tx list hero

4 files changed, 21 insertions, 5 deletions

diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index dce9b0449..424048745 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -36,6 +36,7 @@ IdenticonComponent.prototype.render = function () {
         key: 'identicon-' + address,
         style: {
           display: 'flex',
+          flexShrink: 0,
           alignItems: 'center',
           justifyContent: 'center',
           height: diameter,
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
index 1900ccec7..df3bd59bb 100644
--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@@ -34,7 +34,7 @@ TokenBalance.prototype.render = function () {
   return isLoading
     ? h('span', '')
     : h('span.token-balance', [
-      h('span.token-balance__amount', string),
+      h('span.hide-text-overflow.token-balance__amount', string),
       !balanceOnly && h('span.token-balance__symbol', symbol),
     ])
 }
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 09d66aedd..eba93ecb4 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -27,25 +27,37 @@
     @media screen and (max-width: $break-small) {
       flex-direction: column;
       flex: 0 0 auto;
+      max-width: 100%;
     }
 
     @media screen and (min-width: $break-large) {
       flex-direction: row;
       flex-grow: 3;
+      min-width: 0;
     }
   }
 
   .balance-display {
     .token-amount {
       color: $black;
+      max-width: 100%;
+
+      .token-balance {
+        display: flex;
+      }
     }
 
     @media screen and (max-width: $break-small) {
+      max-width: 100%;
       text-align: center;
 
       .token-amount {
         font-size: 1.75rem;
         margin-top: 1rem;
+
+        .token-balance {
+          flex-direction: column;
+        }
       }
 
       .fiat-amount {
@@ -56,9 +68,10 @@
     }
 
     @media screen and (min-width: $break-large) {
-      margin-left: .8em;
+      margin: 0 .8em;
       justify-content: flex-start;
       align-items: flex-start;
+      min-width: 0;
 
       .token-amount {
         font-size: 1.5rem;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index bbe0ee661..667e45ba2 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -26,14 +26,16 @@ $wallet-view-bg: $alabaster;
 //Account and transaction details
 .account-and-transaction-details {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 // tx view
 
 .tx-view {
-  flex: 63.5 0 66.5%;
+  flex: 1 1 66.5%;
   background: $tx-view-bg;
+  min-width: 0;
 
   // No title on mobile
   @media screen and (max-width: 575px) {
@@ -286,7 +288,7 @@ $wallet-view-bg: $alabaster;
 }
 
 .token-balance__amount {
-  padding-right: 6px;
+  padding: 0 6px;
 }
 
 // first time