fix: long text overflow

lifinance · Apr 12, 2023 · fdf8153 · fdf8153
1 parent 6f547d7
commit fdf8153
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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 ? (