From e59c3436bb6fc1fef81cac7f466297662e8684bf Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Wed, 9 Jan 2019 13:26:42 +0100
Subject: [PATCH] fix fee label overflow

---
 .../Wallet/views/Account/Send/ethereum/index.js | 17 +++++++++++++++--
 .../Wallet/views/Account/Send/ripple/index.js   | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js
index 6b88ff53..d6a74707 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/index.js
@@ -87,6 +87,19 @@ const FeeOptionWrapper = styled.div`
     justify-content: space-between;
 `;
 
+const OptionValue = styled(P)`
+    flex: 0 0 0;
+    margin-right: 5px;
+`;
+
+const OptionLabel = styled(P)`
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: right;
+    word-break: break-all;
+`;
+
 const FeeLabelWrapper = styled.div`
     display: flex;
     align-items: center;
@@ -348,8 +361,8 @@ const AccountSend = (props: Props) => {
                     options={feeLevels}
                     formatOptionLabel={option => (
                         <FeeOptionWrapper>
-                            <P>{option.value}</P>
-                            <P>{option.label}</P>
+                            <OptionValue>{option.value}</OptionValue>
+                            <OptionLabel>{option.label}</OptionLabel>
                         </FeeOptionWrapper>
                     )}
                 />
diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js
index cdc7fd3e..689c2cc4 100644
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/index.js
@@ -74,6 +74,19 @@ const FeeOptionWrapper = styled.div`
     justify-content: space-between;
 `;
 
+const OptionValue = styled(P)`
+    flex: 0 0 0;
+    margin-right: 5px;
+`;
+
+const OptionLabel = styled(P)`
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: right;
+    word-break: break-all;
+`;
+
 const FeeLabelWrapper = styled.div`
     display: flex;
     align-items: center;
@@ -302,8 +315,8 @@ const AccountSend = (props: Props) => {
                     options={feeLevels}
                     formatOptionLabel={option => (
                         <FeeOptionWrapper>
-                            <P>{option.value}</P>
-                            <P>{option.label}</P>
+                            <OptionValue>{option.value}</OptionValue>
+                            <OptionLabel>{option.label}</OptionLabel>
                         </FeeOptionWrapper>
                     )}
                 />