From 4ecdf73ce9cb43fb5e12addde9d9405b4f3c5b7c Mon Sep 17 00:00:00 2001
From: Lowhearth <hearthisinyourmind@gmail.com>
Date: Mon, 9 Sep 2019 14:59:41 +0200
Subject: [PATCH] Avoid overflow on staking pages #1502 (#1593)

* Closes #1502

Avoid text overflow on staking app

* adjusted flex ratio
---
 packages/app-staking/src/Actions/Account/index.tsx | 5 +++--
 packages/react-components/src/CopyButton.tsx       | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx
index 7c6e450239..e4c732e801 100644
--- a/packages/app-staking/src/Actions/Account/index.tsx
+++ b/packages/app-staking/src/Actions/Account/index.tsx
@@ -598,9 +598,10 @@ export default withMulti(
     display: flex;
 
     .staking--Accounts {
-      flex: 1;
+      flex: 3;
       display: flex;
-      flex-direction: column
+      flex-direction: column;
+      width: 0px;
     }
 
     .staking--Account-detail.actions{
diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx
index e152916f47..86d020a494 100644
--- a/packages/react-components/src/CopyButton.tsx
+++ b/packages/react-components/src/CopyButton.tsx
@@ -46,7 +46,7 @@ function CopyButtonInner (props: InnerProps): React.ReactElement<InnerProps> {
         onCopy={onCopy(props)}
         text={value}
       >
-        <div>
+        <div className='copyContainer'>
           {children}
           <span className='copySpan'>
             <Button
@@ -77,7 +77,8 @@ function CopyButton (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(CopyButton)`
+export default styled(CopyButton)`  
+  width: 100%;
   cursor: copy;
 
   button.ui.mini.icon.primary.button.iconButton {
@@ -87,4 +88,8 @@ export default styled(CopyButton)`
   .copySpan {
     white-space: nowrap;
   }
+  .copyContainer {
+    display: flex;
+    text-overflow: ellipsis;
+  }
 `;