From a76f4e4dfe07e3221d6d9378f95e5fe254a4dac3 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 5 Apr 2021 17:22:19 +0800
Subject: [PATCH] Fix table wrapping

Wrap second column instead of making it scroll horizontally.
---
 static/app-strings.json          |  1 +
 ui/component/walletSwap/view.jsx |  4 ++--
 ui/scss/component/_table.scss    | 11 +++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index b071a3446..4b2758652 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1757,6 +1757,7 @@
   "Unable to obtain exchange rate. Try again later.": "Unable to obtain exchange rate. Try again later.",
   "The BTC amount needs to be higher": "The BTC amount needs to be higher",
   "The BTC amount is too high": "The BTC amount is too high",
+  "Address": "Address",
   "Confirm Address Removal": "Confirm Address Removal",
   "Remove BTC Swap Address": "Remove BTC Swap Address",
   "This process cannot be reversed.": "This process cannot be reversed.",
diff --git a/ui/component/walletSwap/view.jsx b/ui/component/walletSwap/view.jsx
index 00039b2c5..f3a5aca44 100644
--- a/ui/component/walletSwap/view.jsx
+++ b/ui/component/walletSwap/view.jsx
@@ -458,8 +458,8 @@ function WalletSwap(props: Props) {
             <table className="table table--btc-swap">
               <thead>
                 <tr>
-                  <th>BTC address</th>
-                  <th>Status</th>
+                  <th>{__('Address')}</th>
+                  <th>{__('Status')}</th>
                   <th />
                 </tr>
               </thead>
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index d8ea2e8d4..3e6a19947 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -155,12 +155,19 @@ th {
 }
 
 .table--btc-swap {
-  tr {
-    white-space: nowrap;
+  width: 100%;
+
+  td:nth-of-type(1) {
+    width: 1%;
   }
 
   td:nth-of-type(2) {
     font-size: var(--font-small);
+    width: 98%;
+  }
+
+  td:nth-of-type(3) {
+    width: 1%;
   }
 }