Display ... for address summary overflows (#4691)

js/src/views/Accounts/Summary/summary.js

@@ -22,7 +22,7 @@ import { isEqual } from 'lodash';
 import ReactTooltip from 'react-tooltip';
 import { FormattedMessage } from 'react-intl';
 
-import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags, Input } from '~/ui';
+import { Balance, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags } from '~/ui';
 import Certifications from '~/ui/Certifications';
 import { arrayOrObjectProptype, nullableProptype } from '~/util/proptypes';
 
@@ -101,15 +101,6 @@ class Summary extends Component {
 
     const { address } = account;
 
-    const addressComponent = (
-      <Input
-        readOnly
-        hideUnderline
-        value={ address }
-        allowCopy={ address }
-      />
-    );
-
     return (
       <Container
         className={ styles.account }
@@ -133,7 +124,12 @@ class Summary extends Component {
             address={ address }
           />
           <ContainerTitle
-            byline={ addressComponent }
+            byline={
+              <div className={ styles.addressline }>
+                <CopyToClipboard data={ address } />
+                <div className={ styles.address }>{ address }</div>
+              </div>
+            }
             className={
               noLink
                 ? styles.main

js/src/views/Accounts/accounts.css

@@ -23,6 +23,19 @@
 .account {
   position: relative;
 
+  .addressline {
+    display: flex;
+    white-space: nowrap;
+
+    .address {
+      display: inline-block;
+      flex: 1;
+      margin-left: 0.5em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
   .blockDescription {
     color: rgba(255, 255, 255, 0.25);
     margin-top: 1.5em;
@@ -95,10 +108,12 @@
 .heading {
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 
   .main,
   .mainLink {
     flex: 1;
+    overflow: hidden;
   }
 
   .mainLink h3 {