From c60e93e25b26b5fc4509f6692e7ed0924f47c3e6 Mon Sep 17 00:00:00 2001
From: "Daniel Arroyo (danielarroyo.eth)"
 <34529009+daniel0ar@users.noreply.github.com>
Date: Thu, 7 Mar 2024 04:32:03 -0500
Subject: [PATCH] fix: Add wrap on queue tx button container (#3401)

* fix: Add wrap on queue tx button container

* style: Remove unnecesary template strings
---
 src/components/transactions/TxDetails/index.tsx       |  4 ++--
 .../transactions/TxDetails/styles.module.css          | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx
index 44331bf67a..32fc925185 100644
--- 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
index 1e92882cfd..f7f5920a46 100644
--- 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);
   }
-}
+}
\ No newline at end of file