fix margins in address details

ui/address/AddressDetails.tsx

@@ -89,7 +89,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
       <Grid
         mt={ 8 }
         columnGap={ 8 }
-        rowGap={{ base: 3, lg: 3 }}
+        rowGap={{ base: 1, lg: 3 }}
         templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
         <AddressNameInfo data={ addressQuery.data }/>
@@ -108,7 +108,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
           title="Tokens"
           hint="All tokens in the account and total value."
           alignSelf="center"
-          py="2px"
+          py={ 0 }
         >
           <TokenSelect/>
         </DetailsInfoItem>
@@ -143,7 +143,7 @@ const AddressDetails = ({ addressQuery }: Props) => {
             title="Last balance update"
             hint="Block number in which the address was updated."
             alignSelf="center"
-            py={{ base: 0, lg: 1 }}
+            py={{ base: '2px', lg: 1 }}
           >
             <Link
               href={ link('block', { id: String(addressQuery.data.block_number_balance_updated_at) }) }

ui/address/details/AddressDetailsSkeleton.tsx

@@ -8,7 +8,7 @@ const AddressDetailsSkeleton = () => {
     <Box>
       <Flex align="center">
         <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>
-        <Skeleton h={ 6 } w="420px" ml={ 2 }/>
+        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 }/>
         <Skeleton h={ 6 } w="24px" ml={ 2 } flexShrink={ 0 }/>
         <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>
         <Skeleton h={ 8 } w="48px" ml={ 3 } flexShrink={ 0 }/>

ui/address/tokenSelect/TokenSelect.tsx

-import { Box, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
 import { useQuery, useQueryClient, useIsFetching } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -71,7 +71,7 @@ const TokenSelect = () => {
   }
 
   return (
-    <>
+    <Flex columnGap={ 3 } mt={{ base: '6px', lg: 0 }}>
       { isMobile ?
         <TokenSelectMobile data={ data } isLoading={ balancesIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ balancesIsFetching === 1 }/>
@@ -83,11 +83,10 @@ const TokenSelect = () => {
           size="sm"
           pl="6px"
           pr="6px"
-          ml={ 3 }
           icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
         />
       </Tooltip>
-    </>
+    </Flex>
   );
 };