fix offsets of grouped inputs

toolkit/chakra/input-group.tsx

@@ -27,10 +27,29 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       endOffset,
       ...rest
     } = props;
+
+    const startElementRef = React.useRef<HTMLDivElement>(null);
+    const endElementRef = React.useRef<HTMLDivElement>(null);
+
+    const [ inlinePaddings, setInlinePaddings ] = React.useState({
+      start: 0,
+      end: 0,
+    });
+
+    React.useEffect(() => {
+      const { width: endWidth } = endElementRef?.current?.getBoundingClientRect() ?? {};
+      const { width: startWidth } = startElementRef?.current?.getBoundingClientRect() ?? {};
+
+      setInlinePaddings({
+        start: startWidth ?? 0,
+        end: endWidth ?? 0,
+      });
+    }, []);
+
     return (
       <Group ref={ ref } w="100%" { ...rest }>
         { startElement && (
-          <InputElement pointerEvents="none" { ...startElementProps }>
+          <InputElement pointerEvents="none" ref={ startElementRef } { ...startElementProps }>
             { startElement }
           </InputElement>
         ) }
@@ -39,12 +58,12 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
             return child;
           }
           return React.cloneElement(child, {
-            ...(startElement && { ps: startOffset ?? `calc(var(--input-height) - 6px)` }),
-            ...(endElement && { pe: endOffset ?? `calc(var(--input-height) - 6px)` }),
+            ...(startElement && { ps: startOffset ?? `${ inlinePaddings.start }px` }),
+            ...(endElement && { pe: endOffset ?? `${ inlinePaddings.end }px` }),
           });
         }) }
         { endElement && (
-          <InputElement placement="end" { ...endElementProps }>
+          <InputElement placement="end" ref={ endElementRef } { ...endElementProps }>
             { endElement }
           </InputElement>
         ) }

ui/address/contract/methods/form/ContractMethodFieldInput.tsx

@@ -131,7 +131,7 @@ const ContractMethodFieldInput = ({ data, hideLabel, path: name, className, isDi
 
   const inputEndElement = (
     <Flex alignItems="center">
-      { field.value !== undefined && field.value !== '' && <ClearButton onClick={ handleClear } isDisabled={ isDisabled } boxSize={ 6 }/> }
+      <ClearButton onClick={ handleClear } isDisabled={ isDisabled } boxSize={ 6 } isVisible={ field.value !== undefined && field.value !== '' }/>
       { data.type === 'address' && <ContractMethodAddressButton onClick={ handleAddressButtonClick } isDisabled={ isDisabled }/> }
       { argTypeMatchInt && !isNativeCoin && (hasTimestampButton ? (
         <Button

ui/address/tokenSelect/TokenSelectMenu.tsx

@@ -32,7 +32,6 @@ const TokenSelectMenu = ({ erc20sort, erc1155sort, erc404sort, filteredData, onI
     <>
       <InputGroup
         startElement={ <IconSvg name="search" boxSize={ 4 } color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }}/> }
-        startOffset="38px"
         mb={ 5 }
       >
         <Input placeholder="Search by token name" onChange={ onInputChange } size="sm" bgColor="dialog.bg"/>

ui/rewards/RewardsReadOnlyInputWithCopy.tsx

@@ -18,7 +18,7 @@ const RewardsReadOnlyInputWithCopy = ({ label, value, className, isLoading }: Pr
   return (
     <Skeleton loading={ isLoading } className={ className }>
       <Field label={ label } floating size="xl" readOnly>
-        <InputGroup endElement={ <CopyToClipboard text={ value }/> } endOffset="40px">
+        <InputGroup endElement={ <CopyToClipboard text={ value }/> }>
           <Input value={ value } fontWeight="500" overflow="hidden" textOverflow="ellipsis"/>
         </InputGroup>
       </Field>

ui/shared/ClearButton.tsx

@@ -8,17 +8,19 @@ interface Props {
   onClick: (e: React.SyntheticEvent) => void;
   isDisabled?: boolean;
   className?: string;
+  isVisible?: boolean;
 }
 
-const ClearButton = ({ onClick, isDisabled, className }: Props) => {
+const ClearButton = ({ onClick, isDisabled, isVisible = true, className }: Props) => {
   return (
     <IconButton
-      disabled={ isDisabled }
+      disabled={ isDisabled || !isVisible }
       className={ className }
       aria-label="Clear input"
       title="Clear input"
       size="sm"
       onClick={ onClick }
+      opacity={ isVisible ? 1 : 0 }
     >
       <IconSvg
         name="status/error"

ui/shared/filters/FilterInput.tsx

@@ -37,7 +37,7 @@ const FilterInput = ({ onChange, size = 'sm', placeholder, initialValue, type, n
 
   const startElement = <IconSvg name="search" color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }} boxSize={ 4 }/>;
 
-  const endElement = filterQuery ? <ClearButton onClick={ handleFilterQueryClear }/> : null;
+  const endElement = <ClearButton onClick={ handleFilterQueryClear } isVisible={ filterQuery.length > 0 }/>;
 
   return (
     <Skeleton
@@ -49,10 +49,8 @@ const FilterInput = ({ onChange, size = 'sm', placeholder, initialValue, type, n
       <InputGroup
         startElement={ startElement }
         startElementProps={{ px: 2 }}
-        startOffset="32px"
         endElement={ endElement }
         endElementProps={{ px: 0, w: '32px' }}
-        endOffset="32px"
       >
         <Input
           ref={ inputRef }

ui/shared/monaco/CodeEditorSearch.tsx

@@ -206,7 +206,6 @@ const CodeEditorSearch = ({ monaco, data, onFileSelect, isInputStuck, isActive,
         boxShadow={ isInputStuck ? '0px 6px 3px 0px rgba(0, 0, 0, 0.05)' : 'none' }
         endElement={ inputEndElement }
         endElementProps={{ height: '26px', pl: '0', pr: '10px', columnGap: '2px' }}
-        endOffset="75px"
       >
         <Input
           size="xs"

ui/snippets/searchBar/SearchBarInput.tsx

@@ -109,27 +109,24 @@ const SearchBarInput = (
   );
 
   const endElement = (() => {
-    if (value) {
-      return <ClearButton onClick={ onClear }/>;
-    }
-
-    if (isMobile) {
-      return null;
-    }
-
     return (
-      <Center
-        boxSize="20px"
-        my="2px"
-        mr={{ base: 1, lg: isHomepage ? 2 : 1 }}
-        borderRadius="sm"
-        borderWidth="1px"
-        borderColor="gray.400"
-        color="gray.400"
-        display={{ base: 'none', lg: 'flex' }}
-      >
-        /
-      </Center>
+      <>
+        <ClearButton onClick={ onClear } isVisible={ value.length > 0 }/>
+        { !isMobile && (
+          <Center
+            boxSize="20px"
+            my="2px"
+            mr={{ base: 1, lg: isHomepage ? 2 : 1 }}
+            borderRadius="sm"
+            borderWidth="1px"
+            borderColor="gray.400"
+            color="gray.400"
+            display={{ base: 'none', lg: 'flex' }}
+          >
+            /
+          </Center>
+        ) }
+      </>
     );
   })();
 
@@ -157,7 +154,6 @@ const SearchBarInput = (
     >
       <InputGroup
         startElement={ startElement }
-        startOffset={{ base: isHomepage ? '50px' : '38px', lg: '50px' }}
         endElement={ endElement }
       >
         <Input

ui/snippets/searchBar/SearchBarRecentKeywords.tsx

-import { Box, Flex, Link, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { clearRecentSearchKeywords, getRecentSearchKeywords, removeRecentSearchKeyword } from 'lib/recentSearchKeywords';
+import { Link } from 'toolkit/chakra/link';
 import TextAd from 'ui/shared/ad/TextAd';
 import ClearButton from 'ui/shared/ClearButton';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -84,7 +85,7 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
           ) :
             <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ kw }</Text>
           }
-          <ClearButton onClick={ removeKeyword(kw) } flexShrink={ 0 }/>
+          <ClearButton onClick={ removeKeyword(kw) } flexShrink={ 0 } boxSize={ 6 }/>
         </Flex>
       )) }
     </Box>