From e45f0beae12e468fa41ccae74189560eb24a0a7c Mon Sep 17 00:00:00 2001
From: Arjun Porwal <65214523+ap211unitech@users.noreply.github.com>
Date: Thu, 20 Mar 2025 08:27:06 +0530
Subject: [PATCH] fix: improve multisig approval modal layout and functionality
 (#11403)

---
 .../src/modals/MultisigApprove.tsx            | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/page-accounts/src/modals/MultisigApprove.tsx b/packages/page-accounts/src/modals/MultisigApprove.tsx
index 067fde6bc1..bba2dd2985 100644
--- a/packages/page-accounts/src/modals/MultisigApprove.tsx
+++ b/packages/page-accounts/src/modals/MultisigApprove.tsx
@@ -79,6 +79,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
       isMultiCall: !!multisig && (multisig.approvals.length + 1) >= threshold,
       multisig
     });
+    setCallHex('');
     setCallData(EMPTY_CALL);
   }, [hash, ongoing, threshold]);
 
@@ -173,7 +174,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
         <Modal.Columns hint={t('The call hash from the list of available and unapproved calls.')}>
           <Dropdown
             label={t('pending hashes {{count}}', {
-              replace: { count: hashes.length }
+              replace: { count: `(${hashes.length})` }
             })}
             onChange={setHash}
             options={hashes}
@@ -231,27 +232,29 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
               <>
                 {isCallOverride && (
                   <Modal.Columns hint={t('The call data for this transaction matching the hash. Once sent, the multisig will be executed against this.')}>
-                    {callData && callInfo
-                      ? (
-                        <Expander
-                          isPadded
-                          summary={`${callInfo.section}.${callInfo.method}`}
-                          summaryMeta={callInfo.meta}
-                        >
-                          <CallDisplay
-                            className='details'
-                            value={callData}
-                          />
-                        </Expander>
-                      )
-                      : (
-                        <Input
-                          autoFocus
-                          isError={!callHex || !!callError}
-                          label={t('call data for final approval')}
-                          onChange={setCallHex}
-                        />
-                      )}
+                    <Input
+                      autoFocus
+                      isError={!callHex || !!callError}
+                      label={t('call data for final approval')}
+                      onChange={setCallHex}
+                      value={callHex}
+                    />
+                    {callData && callInfo &&
+                       (
+                         <div style={{ marginTop: 8 }}>
+                           <Expander
+                             isPadded
+                             summary={`${callInfo.section}.${callInfo.method}`}
+                             summaryMeta={callInfo.meta}
+                           >
+                             <CallDisplay
+                               className='details'
+                               value={callData}
+                             />
+                           </Expander>
+                         </div>
+                       )
+                    }
                     {callError && (
                       <MarkError content={callError} />
                     )}
@@ -290,7 +293,8 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold = 0, who
 
 const StyledModal = styled(Modal)`
   .tipToggle {
-    width: 100%;
+    width: fit-content;
+    float: right;
     text-align: right;
   }
 `;