From 48d64e403835b5bf98623af769f741e929b860fb Mon Sep 17 00:00:00 2001
From: Luke Schoen <ltfschoen@gmail.com>
Date: Thu, 24 Jan 2019 14:30:55 +1100
Subject: [PATCH] feat: Fixes #390. Show shortened version if account name over
 25 chars

---
 .../fether-react/src/assets/sass/components/_account.scss   | 1 +
 packages/fether-ui/src/AccountCard/Name/Name.js             | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/fether-react/src/assets/sass/components/_account.scss b/packages/fether-react/src/assets/sass/components/_account.scss
index b421e9268..cb9f55f48 100644
--- a/packages/fether-react/src/assets/sass/components/_account.scss
+++ b/packages/fether-react/src/assets/sass/components/_account.scss
@@ -38,6 +38,7 @@
     color: $black;
     font-weight: 500;
     margin-bottom: 0.1rem;
+    white-space: nowrap;
 
     /**
      * Information component when used with components
diff --git a/packages/fether-ui/src/AccountCard/Name/Name.js b/packages/fether-ui/src/AccountCard/Name/Name.js
index 9825c06cf..f0c56403f 100644
--- a/packages/fether-ui/src/AccountCard/Name/Name.js
+++ b/packages/fether-ui/src/AccountCard/Name/Name.js
@@ -8,12 +8,16 @@ import PropTypes from 'prop-types';
 
 import { Placeholder } from '../../Placeholder';
 
+const MAX_ACCOUNT_NAME_LENGTH = 25;
+
 export const Name = ({ name, screen, ...otherProps }) => (
   <div
     className={`account_name ${screen !== 'accounts' ? '-header' : ''}`}
     {...otherProps}
   >
-    {name || <Placeholder height={18} width={100} />}
+    {name.length > MAX_ACCOUNT_NAME_LENGTH
+      ? `${name.substring(0, MAX_ACCOUNT_NAME_LENGTH)}...`
+      : name || <Placeholder height={14} width={100} />}
   </div>
 );