update form layout and button styling

ui/address/contract/ContractMethodCallable.tsx

@@ -119,13 +119,11 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
     <Box>
       <chakra.form
         noValidate
-        display="flex"
+        display="grid"
         columnGap={ 3 }
-        flexDir={{ base: 'column', lg: 'row' }}
-        rowGap={ 2 }
-        alignItems={{ base: 'flex-start', lg: 'center' }}
+        rowGap={{ base: 2, lg: 3 }}
+        gridTemplateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 180px) minmax(0, 1fr)' }}
         onSubmit={ handleSubmit(onFormSubmit) }
-        flexWrap="wrap"
         onChange={ handleFormChange }
       >
         { inputs.map(({ type, name }, index) => {
@@ -146,13 +144,15 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
         }) }
         <Button
           isLoading={ isLoading }
-          loadingText={ isWrite ? 'Write' : 'Query' }
+          loadingText={ isWrite ? 'Write' : 'Read' }
           variant="outline"
           size="sm"
           flexShrink={ 0 }
+          width="min-content"
+          px={ 4 }
           type="submit"
         >
-          { isWrite ? 'Write' : 'Query' }
+          { isWrite ? 'Write' : 'Read' }
         </Button>
       </chakra.form>
       { 'outputs' in data && !isWrite && data.outputs.length > 0 && (

ui/address/contract/ContractMethodField.tsx

 import {
+  Box,
   FormControl,
   Input,
   InputGroup,
@@ -50,9 +51,8 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
     return (
       <FormControl
         id={ name }
-        flexBasis={{ base: '100%', lg: 'calc((100% - 24px) / 3 - 65px)' }}
-        w={{ base: '100%', lg: 'auto' }}
-        flexGrow={ 1 }
+        w="100%"
+        mb={{ base: 1, lg: 0 }}
         isDisabled={ isDisabled }
       >
         <InputGroup size="xs">
@@ -61,6 +61,7 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
             ref={ ref }
             placeholder={ placeholder }
             paddingRight={ hasZerosControl ? '120px' : '40px' }
+            autoComplete="off"
           />
           <InputRightElement w="auto" right={ 1 }>
             { field.value && <ClearButton onClick={ handleClear } isDisabled={ isDisabled }/> }
@@ -72,12 +73,21 @@ const ContractMethodField = ({ control, name, valueType, placeholder, setValue,
   }, [ name, isDisabled, placeholder, hasZerosControl, handleClear, handleAddZeroesClick ]);
 
   return (
-    <Controller
-      name={ name }
-      control={ control }
-      render={ renderInput }
-    />
-
+    <>
+      <Box
+        fontWeight={ 500 }
+        lineHeight="20px"
+        py={{ lg: '6px' }}
+        fontSize="sm"
+      >
+        { name } ({ valueType })
+      </Box>
+      <Controller
+        name={ name }
+        control={ control }
+        render={ renderInput }
+      />
+    </>
   );
 };