From dc3b51e5f9f56cd0eed57e3e1afd89185c3df911 Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Mon, 29 Apr 2024 16:15:40 +0100
Subject: [PATCH] Fix clipped input buttons

---
 .../ProposalBuilder/ProposalTransaction.tsx   | 36 ++++++++++++++-----
 .../ProposalBuilder/ProposalTransactions.tsx  | 16 ++++-----
 .../ProposalTransactionsForm.tsx              |  4 +--
 src/components/ProposalBuilder/index.tsx      |  1 -
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/ProposalBuilder/ProposalTransaction.tsx b/src/components/ProposalBuilder/ProposalTransaction.tsx
index 3498ffc450..4cad51e231 100644
--- a/src/components/ProposalBuilder/ProposalTransaction.tsx
+++ b/src/components/ProposalBuilder/ProposalTransaction.tsx
@@ -65,9 +65,10 @@ export default function ProposalTransaction({
   return (
     <VStack
       align="left"
-      spacing={4}
+      px="1.5rem"
       mt={6}
     >
+      {/* TRANSACTION TARGET ADDRESS */}
       <InputComponent
         label={t('labelTargetAddress')}
         helper={t('helperTargetAddress')}
@@ -97,7 +98,10 @@ export default function ProposalTransaction({
           />
         </Box>
       )}
+
       <Divider my="1.5rem" />
+
+      {/* FUNCTION SPECIFICATION */}
       <Box>
         <Text
           textStyle="display-lg"
@@ -125,7 +129,9 @@ export default function ProposalTransaction({
           testId="transaction.functionName"
         />
       </Box>
-      <Box>
+
+      {/* TRANSACTION PARAMETERS LIST */}
+      <Box mt="1.5rem">
         <Accordion
           allowMultiple
           index={expandedIndecies}
@@ -138,11 +144,17 @@ export default function ProposalTransaction({
               padding="1rem"
               borderRadius={4}
               bg="neutral-3"
+              px={0}
+              py="1.5rem"
             >
               {({ isExpanded }) => (
                 <>
                   <Box>
-                    <HStack justify="space-between">
+                    {/* TRANSACTION PARAMETER HEADER */}
+                    <HStack
+                      px="1.5rem"
+                      justify="space-between"
+                    >
                       <AccordionButton
                         onClick={() => {
                           setExpandedIndecies(indexArray => {
@@ -169,6 +181,8 @@ export default function ProposalTransaction({
                           </Flex>
                         </Text>
                       </AccordionButton>
+
+                      {/* Remove parameter button */}
                       {i !== 0 || transaction.parameters.length !== 1 ? (
                         <IconButton
                           icon={<MinusCircle />}
@@ -193,12 +207,11 @@ export default function ProposalTransaction({
                         <Box h="2.25rem" />
                       )}
                     </HStack>
+
+                    {/* TRANSACTION PARAMETER SECTION */}
                     <AccordionPanel p={0}>
-                      <Flex
-                        gap={2}
-                        mt={6}
-                      >
-                        <Box>
+                      <Flex mt="1rem">
+                        <Box px="1.5rem">
                           <InputComponent
                             label={t('labelFunctionParameter', { ns: 'proposalTemplate' })}
                             helper={t('helperFunctionParameter', { ns: 'proposalTemplate' })}
@@ -362,12 +375,15 @@ export default function ProposalTransaction({
                       </Flex>
                     </AccordionPanel>
                   </Box>
+
                   {!isExpanded && (
                     <Divider
                       variant="light"
                       mt="0.5rem"
                     />
                   )}
+
+                  {/* ADD PARAMETER BUTTON */}
                   {i === transaction.parameters.length - 1 && (
                     <Button
                       onClick={() => {
@@ -380,8 +396,8 @@ export default function ProposalTransaction({
                       }}
                       variant="text"
                       color="celery-0"
-                      padding="0.25rem 0.75rem"
                       mt={1}
+                      mx="1.5rem"
                       gap="0.25rem"
                       borderRadius="625rem"
                       borderColor="transparent"
@@ -398,6 +414,8 @@ export default function ProposalTransaction({
             </AccordionItem>
           ))}
         </Accordion>
+
+        {/* ETH VALUE */}
         <Box mt={6}>
           <BigIntComponent
             label={t('labelEthValue')}
diff --git a/src/components/ProposalBuilder/ProposalTransactions.tsx b/src/components/ProposalBuilder/ProposalTransactions.tsx
index ea5e09a7fc..4848f5ffb0 100644
--- a/src/components/ProposalBuilder/ProposalTransactions.tsx
+++ b/src/components/ProposalBuilder/ProposalTransactions.tsx
@@ -61,15 +61,14 @@ export default function ProposalTransactions({
             key={index}
             borderTop="none"
             borderBottom="none"
-            my="1.5rem"
           >
             {({ isExpanded }) => (
-              <Box
-                borderRadius={4}
-                p={3}
-                my="2"
-              >
-                <HStack justify="space-between">
+              <Box borderRadius={4}>
+                {/* TRANSACTION HEADER */}
+                <HStack
+                  px="1.5rem"
+                  justify="space-between"
+                >
                   <AccordionButton
                     onClick={() => {
                       setExpandedIndecies(indexArray => {
@@ -82,7 +81,7 @@ export default function ProposalTransactions({
                         }
                       });
                     }}
-                    p={0}
+                    p="0.25rem"
                     textStyle="display-lg"
                     color="lilac-0"
                   >
@@ -112,6 +111,7 @@ export default function ProposalTransactions({
                     <Box h="2.25rem" />
                   )}
                 </HStack>
+
                 <AccordionPanel p={0}>
                   <ProposalTransaction
                     transaction={transactions[index] as CreateProposalTransaction}
diff --git a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
index 4eb8976cdb..2cb7457d24 100644
--- a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
+++ b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
@@ -32,7 +32,7 @@ export default function ProposalTransactionsForm(props: ProposalTransactionsForm
   }, [safeNonce, setFieldValue]);
 
   return (
-    <Box>
+    <Box py="1.5rem">
       <ProposalTransactions
         expandedIndecies={expandedIndecies}
         setExpandedIndecies={setExpandedIndecies}
@@ -49,7 +49,7 @@ export default function ProposalTransactionsForm(props: ProposalTransactionsForm
         disabled={pendingTransaction}
         w="fit-content"
         color="celery-0"
-        padding="0.25rem 0.75rem"
+        mx="1.5rem"
         gap="0.25rem"
         borderRadius="625rem"
         borderColor="transparent"
diff --git a/src/components/ProposalBuilder/index.tsx b/src/components/ProposalBuilder/index.tsx
index 7d51ce71c9..6eab879a8b 100644
--- a/src/components/ProposalBuilder/index.tsx
+++ b/src/components/ProposalBuilder/index.tsx
@@ -142,7 +142,6 @@ export function ProposalBuilder({
                     <Box
                       marginBottom="2rem"
                       rounded="lg"
-                      p="1.5rem"
                       bg="neutral-2"
                     >
                       {formState === CreateProposalState.METADATA_FORM ? (