Bug: holders table doesn't fit viewport width if the address name is too long (#2899)

Fixes #2860

ui/pages/Token.tsx

@@ -247,13 +247,14 @@ const TokenPageContent = () => {
     return (
       <>
         { (tab === 'token_transfers' || tab === '') && (
-          <TokenAdvancedFilterLink token={ tokenQuery.data }/>
+          <TokenAdvancedFilterLink token={ tokenQuery.data } ml={ 6 }/>
         ) }
         { tab === 'holders' && (
           <AddressCsvExportLink
             address={ hashString }
             params={{ type: 'holders' }}
             isLoading={ pagination?.isLoading }
+            ml={ 6 }
           />
         ) }
         { pagination?.isVisible && <Pagination { ...pagination }/> }

ui/token/TokenAdvancedFilterLink.tsx

@@ -7,15 +7,16 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import type { LinkProps } from 'toolkit/chakra/link';
 import { Link } from 'toolkit/chakra/link';
 import IconSvg from 'ui/shared/IconSvg';
 
-interface Props {
+interface Props extends LinkProps {
   isLoading?: boolean;
   token?: TokenInfo;
 }
 
-const TokenAdvancedFilterLink = ({ isLoading, token }: Props) => {
+const TokenAdvancedFilterLink = ({ isLoading, token, ...rest }: Props) => {
   const isInitialLoading = useIsInitialLoading(isLoading);
 
   if (!token || !config.features.advancedFilter.isEnabled) {
@@ -34,6 +35,7 @@ const TokenAdvancedFilterLink = ({ isLoading, token }: Props) => {
       loading={ isInitialLoading }
       minW={ 8 }
       justifyContent="center"
+      { ...rest }
     >
       <IconSvg name="filter" boxSize={ 6 }/>
       <chakra.span ml={ 1 } hideBelow="lg">Advanced filter</chakra.span>

ui/token/TokenHolders/TokenHoldersTable.tsx

@@ -14,12 +14,12 @@ interface Props {
 
 const TokenHoldersTable = ({ data, token, top, isLoading }: Props) => {
   return (
-    <TableRoot tableLayout="auto">
+    <TableRoot>
       <TableHeaderSticky top={ top }>
         <TableRow>
-          <TableColumnHeader>Holder</TableColumnHeader>
-          { (token.type === 'ERC-1155' || token.type === 'ERC-404') && <TableColumnHeader>ID#</TableColumnHeader> }
-          <TableColumnHeader isNumeric>Quantity</TableColumnHeader>
+          <TableColumnHeader w="70%">Holder</TableColumnHeader>
+          { (token.type === 'ERC-1155' || token.type === 'ERC-404') && <TableColumnHeader w="30%">ID#</TableColumnHeader> }
+          <TableColumnHeader isNumeric width="220px">Quantity</TableColumnHeader>
           { token.total_supply && token.type !== 'ERC-404' && <TableColumnHeader isNumeric width="175px">Percentage</TableColumnHeader> }
         </TableRow>
       </TableHeaderSticky>