change fields layout

ui/address/contract/ContractRead.tsx

@@ -72,7 +72,7 @@ const ContractRead = () => {
                 <AccordionIcon/>
               </AccordionButton>
             </h2>
-            <AccordionPanel pb={ 4 }>
+            <AccordionPanel pb={ 4 } px={ 0 }>
               { item.inputs.length === 0 ? (
                 <Flex flexDir="column" rowGap={ 1 }>
                   { item.outputs.map((output, index) => <ContractReadItemOutput key={ index } data={ output }/>) }

ui/address/contract/ContractReadItemInput.tsx

@@ -82,6 +82,7 @@ const ContractReadItemInput = ({ data, address, methodId, methodName, outputs }:
         rowGap={ 2 }
         alignItems={{ base: 'flex-start', lg: 'center' }}
         onSubmit={ handleSubmit(onSubmit) }
+        flexWrap="wrap"
       >
         { data.map(({ type, name }, index) => {
           const fieldName = getFieldName(name, index);

ui/address/contract/ContractReadItemInputField.tsx

@@ -24,16 +24,18 @@ const ContractReadItemInputField = ({ control, name, placeholder, setValue }: Pr
 
   const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodInputFields> }) => {
     return (
-      <FormControl id={ name }>
+      <FormControl id={ name } maxW={{ base: '100%', lg: 'calc((100% - 24px) / 3)' }}>
         <InputGroup size="xs">
           <Input
             { ...field }
             ref={ ref }
             placeholder={ placeholder }
           />
-          <InputRightElement>
-            <InputClearButton onClick={ handleClear }/>
-          </InputRightElement>
+          { field.value && (
+            <InputRightElement>
+              <InputClearButton onClick={ handleClear }/>
+            </InputRightElement>
+          ) }
         </InputGroup>
       </FormControl>
     );