fix: increase min-width of nonce field

safe-global · Jul 11, 2023 · 3821808 · 3821808
1 parent db76669
commit 3821808
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -54,6 +54,18 @@ const NonceFormOption = memo(function NonceFormOption({
   )
 })
 
+const getFieldMinWidth = (value: string, showRecommendedNonceButton?: boolean): string => {
+  const MIN_CHARS = 4
+  const MAX_WIDTH = '200px'
+
+  const extraWidth = `${showRecommendedNonceButton ? 32 : 8}px`
+
+  return `clamp(calc(${MIN_CHARS}ch + ${extraWidth}), calc(${Math.max(
+    MIN_CHARS,
+    value.length,
+  )}ch + ${extraWidth}), ${MAX_WIDTH})`
+}
+
 enum TxNonceFormFieldNames {
   NONCE = 'nonce',
 }
@@ -114,8 +126,6 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
 
         const showRecommendedNonceButton = recommendedNonce !== field.value
 
-        const extraWidth = showRecommendedNonceButton ? 32 : 8
-
         return (
           <Autocomplete
             value={field.value}
@@ -172,9 +182,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
                       },
                     ])}
                     sx={{
-                      minWidth: `clamp(calc(1ch + ${extraWidth}px), calc(${
-                        field.value.toString().length
-                      }ch + ${extraWidth}px), 200px)`,
+                      minWidth: getFieldMinWidth(field.value, showRecommendedNonceButton),
                     }}
                   />
                 </Tooltip>
@@ -188,6 +196,8 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
   )
 }
 
+const skeletonMinWidth = getFieldMinWidth('')
+
 const TxNonce = () => {
   const { nonce, recommendedNonce } = useContext(SafeTxContext)
 
@@ -198,7 +208,7 @@ const TxNonce = () => {
         #
       </Typography>
       {nonce === undefined || recommendedNonce === undefined ? (
-        <Skeleton width="70px" height="38px" />
+        <Skeleton width={skeletonMinWidth} height="38px" />
       ) : (
         <TxNonceForm nonce={nonce.toString()} recommendedNonce={recommendedNonce.toString()} />
       )}