fix: Add wrap on queue tx button container (#3401)

* fix: Add wrap on queue tx button container * style: Remove unnecesary template strings
safe-global · Mar 7, 2024 · c60e93e · c60e93e
1 parent 63e243e
commit c60e93e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx
@@ -95,7 +95,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
         </div>
 
         {isMultiSendTxInfo(txDetails.txInfo) && (
-          <div className={`${css.multiSend}`}>
+          <div className={css.multiSend}>
             <ErrorBoundary fallback={<div>Error parsing data</div>}>
               <Multisend txData={txDetails.txData} />
             </ErrorBoundary>
@@ -109,7 +109,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
           <TxSigners txDetails={txDetails} txSummary={txSummary} />
 
           {isQueue && (
-            <Box display="flex" alignItems="center" justifyContent="center" gap={1} mt={2}>
+            <Box className={css.buttons}>
               {awaitingExecution ? <ExecuteTxButton txSummary={txSummary} /> : <SignTxButton txSummary={txSummary} />}
               <RejectTxButton txSummary={txSummary} />
             </Box>

diff --git a/src/components/transactions/TxDetails/styles.module.css b/src/components/transactions/TxDetails/styles.module.css
@@ -56,6 +56,15 @@
   border-top: 1px solid var(--color-border-light);
 }
 
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  margin-top: var(--space-2);
+}
+
 @media (max-width: 599.95px) {
   .container {
     flex-direction: column;
@@ -70,4 +79,4 @@
     border-left: 0;
     border-top: 1px solid var(--color-border-light);
   }
-}
+}