Tokens: fix the text overflow in the header (aragon#1031)

MickdeGraaf · Nov 4, 2019 · 4d42373 · 4d42373
1 parent b65833a
commit 4d42373
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/app/src/App.js b/app/src/App.js
@@ -129,20 +129,28 @@ class App extends React.PureComponent {
                   css={`
                     display: flex;
                     align-items: center;
+                    flex: 1 1 auto;
+                    width: 0;
                   `}
                 >
                   <h1
                     css={`
                       ${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={