From fdf8153a312dc4309eaef4a79f882700298a6321 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Wed, 12 Apr 2023 16:11:13 +0800
Subject: [PATCH] fix: long text overflow

---
 .../Step/DestinationWalletAddress.tsx         | 29 ++++++----------
 .../src/components/Step/GasStepProcess.tsx    |  2 +-
 .../src/components/Step/StepProcess.tsx       | 34 ++++++++-----------
 3 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/packages/widget/src/components/Step/DestinationWalletAddress.tsx b/packages/widget/src/components/Step/DestinationWalletAddress.tsx
index 14b730b56..7dd573a0f 100644
--- a/packages/widget/src/components/Step/DestinationWalletAddress.tsx
+++ b/packages/widget/src/components/Step/DestinationWalletAddress.tsx
@@ -30,7 +30,7 @@ export const DestinationWalletAddress: React.FC<{
             }}
           />
         </CircularIcon>
-        <Typography ml={2} fontSize={14} fontWeight={400}>
+        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
           {isDone
             ? t('swap.sentToAddress', {
                 address: toAddress,
@@ -39,25 +39,16 @@ export const DestinationWalletAddress: React.FC<{
                 address: toAddress,
               })}
         </Typography>
-        <Box
-          ml={2}
-          sx={{
-            display: 'flex',
-            flex: 1,
-            justifyContent: 'flex-end',
-          }}
+        <LinkButton
+          size="small"
+          edge="end"
+          LinkComponent={Link}
+          href={toAddressLink}
+          target="_blank"
+          rel="nofollow noreferrer"
         >
-          <LinkButton
-            size="small"
-            edge="end"
-            LinkComponent={Link}
-            href={toAddressLink}
-            target="_blank"
-            rel="nofollow noreferrer"
-          >
-            <LinkRoundedIcon />
-          </LinkButton>
-        </Box>
+          <LinkRoundedIcon />
+        </LinkButton>
       </Box>
     </Box>
   );
diff --git a/packages/widget/src/components/Step/GasStepProcess.tsx b/packages/widget/src/components/Step/GasStepProcess.tsx
index 1b18d03e7..664b05c2b 100644
--- a/packages/widget/src/components/Step/GasStepProcess.tsx
+++ b/packages/widget/src/components/Step/GasStepProcess.tsx
@@ -26,7 +26,7 @@ export const GasStepProcess: React.FC<{
             }}
           />
         </CircularIcon>
-        <Typography ml={2} fontSize={14} fontWeight={400}>
+        <Typography ml={2} flex={1} fontSize={14} fontWeight={400}>
           {t('format.currency', {
             value:
               (step.execution?.gasAmountUSD ||
diff --git a/packages/widget/src/components/Step/StepProcess.tsx b/packages/widget/src/components/Step/StepProcess.tsx
index ca43404f9..7b72ab903 100644
--- a/packages/widget/src/components/Step/StepProcess.tsx
+++ b/packages/widget/src/components/Step/StepProcess.tsx
@@ -19,29 +19,25 @@ export const StepProcess: React.FC<{
         }}
       >
         <CircularProgress process={process} />
-        <Typography ml={2} fontSize={14} fontWeight={process.error ? 600 : 400}>
+        <Typography
+          mx={2}
+          flex={1}
+          fontSize={14}
+          fontWeight={process.error ? 600 : 400}
+        >
           {title}
         </Typography>
         {process.txLink ? (
-          <Box
-            ml={2}
-            sx={{
-              display: 'flex',
-              flex: 1,
-              justifyContent: 'flex-end',
-            }}
+          <LinkButton
+            size="small"
+            edge="end"
+            LinkComponent={Link}
+            href={process.txLink}
+            target="_blank"
+            rel="nofollow noreferrer"
           >
-            <LinkButton
-              size="small"
-              edge="end"
-              LinkComponent={Link}
-              href={process.txLink}
-              target="_blank"
-              rel="nofollow noreferrer"
-            >
-              <LinkRoundedIcon />
-            </LinkButton>
-          </Box>
+            <LinkRoundedIcon />
+          </LinkButton>
         ) : null}
       </Box>
       {message ? (