fix: inconsistent layout in dashboard pending transactions view (#4034)

* fix: alignment in transactions view dashboard * feat: apply truncate text default
safe-global · Aug 28, 2024 · f3cdeb2 · f3cdeb2
1 parent d4f4d6d
commit f3cdeb2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 17 deletions.
diff --git a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
@@ -36,17 +36,21 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
   return (
     <NextLink data-testid="tx-pending-item" href={url} passHref>
       <Box className={css.container}>
-        <Box minWidth={30}>{isMultisigExecutionInfo(transaction.executionInfo) && transaction.executionInfo.nonce}</Box>
+        <Box className={css.innerContainer}>
+          <Box minWidth={30}>
+            {isMultisigExecutionInfo(transaction.executionInfo) && transaction.executionInfo.nonce}
+          </Box>
 
-        <Box minWidth={62}>
-          <TxType tx={transaction} />
-        </Box>
-
-        <TxInfo info={transaction.txInfo} />
+          <Box minWidth={62}>
+            <TxType tx={transaction} />
+          </Box>
 
-        <Box flexGrow={1} />
+          <Box minWidth={0} flexGrow={1}>
+            <TxInfo info={transaction.txInfo} />
+          </Box>
+        </Box>
 
-        <Box alignSelf="flex-end" display="flex" flexWrap="nowrap" alignItems="center" gap={1.5}>
+        <Box alignSelf="flex-start" display="flex" flexWrap="nowrap" alignItems="center" gap={1.5}>
           {isMultisigExecutionInfo(transaction.executionInfo) && (
             <TxConfirmations
               submittedConfirmations={transaction.executionInfo.confirmationsSubmitted}

diff --git a/src/components/dashboard/PendingTxs/styles.module.css b/src/components/dashboard/PendingTxs/styles.module.css
@@ -4,13 +4,21 @@
   background-color: var(--color-background-paper);
   border: 1px solid var(--color-background-paper);
   border-radius: 8px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   display: flex;
   align-items: center;
   gap: var(--space-2);
   min-height: 50px;
 }
-
+.innerContainer {
+  min-width: 0;
+  flex-grow: 1;
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--space-2);
+}
 .container:hover {
   background-color: var(--color-background-light);
   border-color: var(--color-secondary-light);
@@ -32,3 +40,11 @@
   display: flex;
   justify-content: space-between;
 }
+
+@media (max-width: 600px) {
+  .container {
+    flex-direction: column;
+    align-items: start;
+    flex-wrap: wrap;
+  }
+}
diff --git a/src/components/transactions/TxInfo/index.tsx b/src/components/transactions/TxInfo/index.tsx
@@ -23,6 +23,8 @@ import {
 import { ellipsis, shortenAddress } from '@/utils/formatters'
 import { useCurrentChain } from '@/hooks/useChains'
 import { SwapTx } from '@/features/swap/components/SwapTxInfo/SwapTx'
+import { Box } from '@mui/material'
+import css from './styles.module.css'
 
 export const TransferTx = ({
   info,
@@ -85,18 +87,18 @@ export const TransferTx = ({
 }
 
 const CustomTx = ({ info }: { info: Custom }): ReactElement => {
-  return <>{info.methodName}</>
+  return <Box className={css.txInfo}>{info.methodName}</Box>
 }
 
 const CreationTx = ({ info }: { info: Creation }): ReactElement => {
-  return <>Created by {shortenAddress(info.creator.value)}</>
+  return <Box className={css.txInfo}>Created by {shortenAddress(info.creator.value)}</Box>
 }
 
 const MultiSendTx = ({ info }: { info: MultiSend }): ReactElement => {
   return (
-    <>
+    <Box className={css.txInfo}>
       {info.actionCount} {`action${info.actionCount > 1 ? 's' : ''}`}
-    </>
+    </Box>
   )
 }
 
@@ -105,9 +107,8 @@ const SettingsChangeTx = ({ info }: { info: SettingsChange }): ReactElement => {
     info.settingsInfo?.type === SettingsInfoType.ENABLE_MODULE ||
     info.settingsInfo?.type === SettingsInfoType.DISABLE_MODULE
   ) {
-    return <>{info.settingsInfo.module.name}</>
+    return <Box className={css.txInfo}>{info.settingsInfo.module.name}</Box>
   }
-
   return <></>
 }
 

diff --git a/src/components/transactions/TxInfo/styles.module.css b/src/components/transactions/TxInfo/styles.module.css
@@ -0,0 +1,5 @@
+.txInfo {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/features/swap/components/SwapTxInfo/SwapTx.tsx b/src/features/swap/components/SwapTxInfo/SwapTx.tsx
@@ -33,7 +33,15 @@ export const SwapTx = ({ info }: { info: Order }): ReactElement => {
   }
 
   return (
-    <Typography component="div" display="flex" alignItems="center" fontWeight="bold">
+    <Typography
+      component="div"
+      display="flex"
+      alignItems="center"
+      fontWeight="bold"
+      whiteSpace="nowrap"
+      overflow="hidden"
+      textOverflow="ellipsis"
+    >
       {from}
       <Typography component="span" mx={0.5}>
         &nbsp;to&nbsp;