fix: TxType overlap/overflow (#3161)

safe-global · Jan 29, 2024 · 4cd8a3d · 4cd8a3d
1 parent 54aa39d
commit 4cd8a3d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 3 deletions.
diff --git a/src/components/batch/BatchSidebar/BatchTxItem.tsx b/src/components/batch/BatchSidebar/BatchTxItem.tsx
@@ -62,7 +62,7 @@ const BatchTxItem = ({
 
       <Accordion elevation={0} sx={{ flex: 1 }} onChange={handleExpand}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />} disabled={dragging} className={css.accordion}>
-          <Box flex={1} display="flex" alignItems="center" gap={2} py={0.4}>
+          <Box flex={1} display="flex" alignItems="center" gap={2} py={0.4} width="100%">
             {draggable && (
               <SvgIcon
                 component={DragIcon}

diff --git a/src/components/batch/BatchSidebar/styles.module.css b/src/components/batch/BatchSidebar/styles.module.css
@@ -99,3 +99,10 @@
 .accordion {
   opacity: 1 !important;
 }
+
+.accordion :global .MuiAccordionSummary-content {
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 12px 0px;
+}
diff --git a/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx b/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
@@ -44,7 +44,18 @@ export const ExpandableTransactionItem = ({
         }
       }}
     >
-      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ justifyContent: 'flex-start', overflowX: 'auto' }}>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        sx={{
+          justifyContent: 'flex-start',
+          overflowX: 'auto',
+          ['.MuiAccordionSummary-content, .MuiAccordionSummary-content.Mui-expanded']: {
+            overflow: 'hidden',
+            margin: 0,
+            padding: '12px 0',
+          },
+        }}
+      >
         <TxSummary item={item} isGrouped={isGrouped} />
       </AccordionSummary>
 

diff --git a/src/components/transactions/TxSummary/styles.module.css b/src/components/transactions/TxSummary/styles.module.css
@@ -17,6 +17,10 @@
   grid-template-areas: 'nonce type info date confirmations status';
 }
 
+.gridContainer > * {
+  max-width: 100%;
+}
+
 .gridContainer.history {
   grid-template-columns: var(--grid-nonce) var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-status);
   grid-template-areas: 'nonce type info date status';

diff --git a/src/components/transactions/TxType/index.tsx b/src/components/transactions/TxType/index.tsx
@@ -20,7 +20,7 @@ const TxType = ({ tx }: TxTypeProps) => {
         height={16}
         fallback="/images/transactions/custom.svg"
       />
-      {type.text}
+      <span className={css.txTypeText}>{type.text}</span>
     </Box>
   )
 }

diff --git a/src/components/transactions/TxType/styles.module.css b/src/components/transactions/TxType/styles.module.css
@@ -4,4 +4,11 @@
   flex-wrap: nowrap;
   gap: var(--space-1);
   color: var(--color-text-primary);
+  overflow: hidden;
+}
+
+.txTypeText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
 }