From 8c099bda9e8639ebc5e958669ad1ab743f73f2ec Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Mon, 18 Jun 2018 18:26:25 +0200
Subject: [PATCH] add ellipsis to the account name on operation row

---
 src/components/OperationsList/AccountCell.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/OperationsList/AccountCell.js b/src/components/OperationsList/AccountCell.js
index 1612c921..3e2405f1 100644
--- a/src/components/OperationsList/AccountCell.js
+++ b/src/components/OperationsList/AccountCell.js
@@ -29,12 +29,22 @@ class AccountCell extends PureComponent<Props> {
         <Box alignItems="center" justifyContent="center" style={{ color: currency.color }}>
           {Icon && <Icon size={16} />}
         </Box>
-        <Box ff="Open Sans|SemiBold" fontSize={3} color="dark">
-          {accountName}
-        </Box>
+        <AccountNameEllipsis>{accountName}</AccountNameEllipsis>
       </Cell>
     )
   }
 }
 
 export default AccountCell
+
+const AccountNameEllipsis = styled(Box).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 3,
+  color: 'dark',
+  flexShrink: 1,
+})`
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`