From 4d4237326570c7bf5df72eaa4450f9467bf9932c Mon Sep 17 00:00:00 2001
From: Pierre Bertet <hello@pierre.world>
Date: Mon, 4 Nov 2019 16:29:26 +0100
Subject: [PATCH] Tokens: fix the text overflow in the header (#1031)

---
 app/src/App.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/src/App.js b/app/src/App.js
index 50e38336be..e13054fab8 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -129,6 +129,8 @@ class App extends React.PureComponent {
                   css={`
                     display: flex;
                     align-items: center;
+                    flex: 1 1 auto;
+                    width: 0;
                   `}
                 >
                   <h1
@@ -136,13 +138,19 @@ class App extends React.PureComponent {
                       ${textStyle(
                         layoutName === 'small' ? 'title3' : 'title2'
                       )};
-                      color: ${theme.content};
+                      flex: 0 1 auto;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
                       margin-right: ${1 * GU}px;
+                      color: ${theme.content};
                     `}
                   >
                     Tokens
                   </h1>
-                  {tokenSymbol && <Tag mode="identifier">{tokenSymbol}</Tag>}
+                  <div css="flex-shrink: 0">
+                    {tokenSymbol && <Tag mode="identifier">{tokenSymbol}</Tag>}
+                  </div>
                 </div>
               }
               secondary={