From 8fe91637d0e57a6475ad28c686806fe5266e480f Mon Sep 17 00:00:00 2001
From: schmanu <manu@safe.global>
Date: Fri, 7 Jul 2023 11:28:09 +0200
Subject: [PATCH] fix: render nonce as text in readonly, fix input width

---
 src/components/tx-flow/common/TxNonce/index.tsx    | 14 ++++++++++----
 .../tx-flow/common/TxNonce/styles.module.css       |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 1310e8498f..27cb39261e 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -103,7 +103,13 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
         },
       }}
       render={({ field, fieldState }) => {
-        const showRecommendedNonceButton = !readOnly && recommendedNonce.toString() !== field.value
+        if (readOnly) {
+          return <>{nonce}</>
+        }
+
+        console.log(field, field.value)
+
+        const showRecommendedNonceButton = recommendedNonce.toString() !== field.value
 
         return (
           <Autocomplete
@@ -119,7 +125,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
               }
             }}
             options={previousNonces}
-            readOnly={readOnly}
             getOptionLabel={(option) => option.toString()}
             renderOption={(props, option) => {
               return <NonceFormOption menuItemProps={props} nonce={option} />
@@ -148,7 +153,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
                           </Tooltip>
                         </InputAdornment>
                       ) : null,
-                      readOnly,
                     }}
                     className={classNames([
                       css.input,
@@ -157,7 +161,9 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: number; recommendedNo
                       },
                     ])}
                     sx={{
-                      minWidth: `clamp(1ch, ${field.value.length}ch, 200px)`,
+                      minWidth: `clamp(1ch, calc(${field.value.toString().length}ch${
+                        showRecommendedNonceButton ? ' + 28px' : ' + 4px'
+                      }), 200px)`,
                     }}
                   />
                 </Tooltip>
diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css
index cfa81cf3fb..614c607033 100644
--- a/src/components/tx-flow/common/TxNonce/styles.module.css
+++ b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -4,6 +4,7 @@
 
 .input input {
   font-weight: bold;
+  min-width: 0px !important;
 }
 
 .input.withAdornment input {