table item fix

ui/tokens/TokensTable.tsx

@@ -17,7 +17,6 @@ const TokensTable = ({ items, page }: Props) => {
     <Table style={{ tableLayout: 'auto' }}>
       <Thead top={ 80 }>
         <Tr>
-          <Th width="fit-content"></Th>
           <Th>Token</Th>
           <Th isNumeric>Price</Th>
           <Th isNumeric>On-chain market cap</Th>

ui/tokens/TokensTableItem.tsx

-import { Flex, Td, Tr, Text, Tag } from '@chakra-ui/react';
+import { Box, Flex, Td, Tr, Text, Tag } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/tokenInfo';
@@ -40,13 +40,23 @@ const TokensTableItem = ({
 
   return (
     <Tr>
-      <Td><Text fontSize="sm" lineHeight="24px" fontWeight={ 600 }>{ (page - 1) * PAGE_SIZE + index + 1 }</Text></Td>
       <Td>
+        <Flex>
+          <Text
+            fontSize="sm"
+            lineHeight="24px"
+            fontWeight={ 600 }
+            mr={ 3 }
+            minW="28px"
+          >
+            { (page - 1) * PAGE_SIZE + index + 1 }
+          </Text>
+          <Box>
             <Flex alignItems="center">
               <TokenLogo hash={ address } name={ name } boxSize={ 6 } mr={ 2 }/>
               <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString }/>
             </Flex>
-        <Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt={ 1 }>
+            <Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt={ 2 }>
               <Flex alignItems="center">
                 <AddressLink fontSize="sm" hash={ address } type="address" truncation="constant" fontWeight={ 500 }/>
                 <CopyToClipboard text={ address } ml={ 1 }/>
@@ -54,6 +64,8 @@ const TokensTableItem = ({
               <AddressAddToMetaMask token={ token }/>
             </Flex>
             <Tag flexShrink={ 0 } ml={ 8 } mt={ 3 }>{ type }</Tag>
+          </Box>
+        </Flex>
       </Td>
       <Td isNumeric><Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ exchangeRate ? `$${ exchangeRate }` : '-' }</Text></Td>
       <Td isNumeric maxWidth="300px" width="300px">