small fixes

ui/address/ensDomains/AddressEnsDomains.tsx

 import { Button, chakra, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, useDisclosure } from '@chakra-ui/react';
+import _clamp from 'lodash/clamp';
 import React from 'react';
 
+import type { EnsDomain } from 'types/api/ens';
+
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
@@ -15,6 +18,19 @@ interface Props {
   mainDomainName: string | null;
 }
 
+const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
+  return (
+    <Grid
+      templateColumns={{ base: `repeat(${ _clamp(data.length, 1, 2) }, 1fr)`, lg: `repeat(${ _clamp(data.length, 1, 3) }, 1fr)` }}
+      columnGap={ 8 }
+      rowGap={ 4 }
+      mt={ 2 }
+    >
+      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
+    </Grid>
+  );
+};
+
 const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
@@ -86,7 +102,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
           flexShrink={ 0 }
         >
           <IconSvg name="ENS_slim" boxSize={ 5 }/>
-          <chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ totalRecords } Domains</chakra.span>
+          <chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
           <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
         </Button>
       </PopoverTrigger>
@@ -105,17 +121,13 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
           { ownedDomains.length > 0 && (
             <div>
               <chakra.span color="text_secondary" fontSize="xs">Other domain names owned by this address</chakra.span>
-              <Grid templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }} columnGap={ 8 } rowGap={ 4 } mt={ 2 }>
-                { ownedDomains.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
-              </Grid>
+              <DomainsGrid data={ ownedDomains }/>
             </div>
           ) }
           { resolvedDomains.length > 0 && (
             <div>
               <chakra.span color="text_secondary" fontSize="xs">Other domain names resolved to this address</chakra.span>
-              <Grid templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }} columnGap={ 8 } rowGap={ 4 } mt={ 2 }>
-                { resolvedDomains.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
-              </Grid>
+              <DomainsGrid data={ resolvedDomains }/>
             </div>
           ) }
           { (ownedDomains.length > 9 || resolvedDomains.length > 9) && (

ui/nameDomain/NameDomainDetails.tsx

@@ -91,7 +91,7 @@ const NameDomainDetails = ({ query }: Props) => {
       ) }
       { query.data?.owner && (
         <DetailsInfoItem
-          title="Controller"
+          title="Owner"
           hint="The account that owns the rights to edit the records of this domain name"
           isLoading={ isLoading }
           columnGap={ 2 }
@@ -114,7 +114,7 @@ const NameDomainDetails = ({ query }: Props) => {
       ) }
       { query.data?.wrapped_owner && (
         <DetailsInfoItem
-          title="Wrapped controller"
+          title="Manager"
           hint="Owner of this NFT domain in NameWrapper contract"
           isLoading={ isLoading }
           columnGap={ 2 }

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

@@ -16,18 +16,18 @@ const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHa
 
   return (
     <Tr>
-      <Td>
+      <Td verticalAlign="middle">
         <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 700 }/>
       </Td>
-      <Td pl={ 9 }>
+      <Td pl={ 9 } verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
           <span>{ dayjs(timestamp).fromNow() }</span>
         </Skeleton>
       </Td>
-      <Td>
+      <Td verticalAlign="middle">
         { fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading }/> }
       </Td>
-      <Td>
+      <Td verticalAlign="middle">
         { action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }
       </Td>
     </Tr>

ui/nameDomains/NameDomainsActionBar.tsx

@@ -42,6 +42,7 @@ const NameDomainsActionBar = ({
   const searchInput = (
     <FilterInput
       w={{ base: '100%', lg: '360px' }}
+      minW={{ base: 'auto', lg: '250px' }}
       size="xs"
       onChange={ onSearchChange }
       placeholder="Search by name"

ui/pages/Address.tsx

@@ -204,7 +204,7 @@ const AddressPageContent = () => {
       <AccountActionsMenu isLoading={ isLoading }/>
       <HStack ml="auto" gap={ 2 }/>
       { addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && <SolidityscanReport hash={ hash }/> }
-      { addressQuery.data && config.features.nameService.isEnabled &&
+      { !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
         <AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
       <NetworkExplorers type="address" pathParam={ hash }/>
     </Flex>