fix sticky header top

ui/address/AddressBlocksValidated.tsx

@@ -97,7 +97,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
       <>
         <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="sm">
-            <Thead top={ 80 }>
+            <Thead top={ query.isPaginationVisible ? 80 : 0 }>
               <Tr>
                 <Th width="17%">Block</Th>
                 <Th width="17%">Age</Th>

ui/address/AddressTokenTransfers.tsx

@@ -196,7 +196,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
             data={ items }
             baseAddress={ currentAddress }
             showTxInfo
-            top={ 80 }
+            top={ isActionBarHidden ? 0 : 80 }
             enableTimeIncrement
             showSocketInfo={ pagination.page === 1 && !tokenFilter }
             socketInfoAlert={ socketAlert }

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -47,7 +47,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
       <>
         <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="sm">
-            <Thead top={ 80 }>
+            <Thead top={ query.isPaginationVisible ? 80 : 0 }>
               <Tr>
                 <Th width="20%">Block</Th>
                 <Th width="20%">Txn</Th>

ui/addresses/AddressesTable.tsx

@@ -12,13 +12,14 @@ interface Props {
   items: Array<AddressesItem>;
   totalSupply: string;
   pageStartIndex: number;
+  top: number;
 }
 
-const AddressesTable = ({ items, totalSupply, pageStartIndex }: Props) => {
+const AddressesTable = ({ items, totalSupply, pageStartIndex, top }: Props) => {
   const hasPercentage = Boolean(totalSupply && totalSupply !== '0');
   return (
     <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+      <Thead top={ top }>
         <Tr>
           <Th width="64px">Rank</Th>
           <Th width={ hasPercentage ? '30%' : '40%' }>Address</Th>

ui/blocks/BlocksContent.tsx

@@ -101,8 +101,12 @@ const BlocksContent = ({ type, query }: Props) => {
     return (
       <>
         { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
-        <Show below="lg" key="content-mobile" ssr={ false }><BlocksList data={ query.data.items }/></Show>
-        <Hide below="lg" key="content-desktop" ssr={ false }><BlocksTable data={ query.data.items } top={ 80 } page={ 1 }/></Hide>
+        <Show below="lg" key="content-mobile" ssr={ false }>
+          <BlocksList data={ query.data.items }/>
+        </Show>
+        <Hide below="lg" key="content-desktop" ssr={ false }>
+          <BlocksTable data={ query.data.items } top={ query.isPaginationVisible ? 80 : 0 } page={ query.pagination.page }/>
+        </Hide>
       </>
     );
 

ui/pages/Accounts.tsx

@@ -47,6 +47,7 @@ const Accounts = () => {
         { bar }
         <Hide below="lg" ssr={ false }>
           <AddressesTable
+            top={ isPaginationVisible ? 80 : 0 }
             items={ data.items }
             totalSupply={ data.total_supply }
             pageStartIndex={ pageStartIndex }

ui/token/TokenHolders/TokenHolders.tsx

@@ -57,7 +57,7 @@ const TokenHoldersContent = ({ holdersQuery, tokenQuery }: Props) => {
   return (
     <>
       { bar }
-      { !isMobile && <TokenHoldersTable data={ items } token={ tokenQuery.data }/> }
+      { !isMobile && <TokenHoldersTable data={ items } token={ tokenQuery.data } top={ holdersQuery.isPaginationVisible ? 80 : 0 }/> }
       { isMobile && <TokenHoldersList data={ items } token={ tokenQuery.data }/> }
     </>
   );

ui/token/TokenHolders/TokenHoldersTable.pw.tsx

@@ -12,7 +12,7 @@ test('base view', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <Box h="128px"/>
-      <TokenHoldersTable data={ tokenHolders.items } token={ tokenInfo }/>
+      <TokenHoldersTable data={ tokenHolders.items } token={ tokenInfo } top={ 80 }/>
     </TestApp>,
   );
 

ui/token/TokenHolders/TokenHoldersTable.tsx

@@ -9,12 +9,13 @@ import TokenHoldersTableItem from 'ui/token/TokenHolders/TokenHoldersTableItem';
 interface Props {
   data: Array<TokenHolder>;
   token: TokenInfo;
+  top: number;
 }
 
-const TokenHoldersTable = ({ data, token }: Props) => {
+const TokenHoldersTable = ({ data, token, top }: Props) => {
   return (
     <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+      <Thead top={ top }>
         <Tr>
           <Th>Holder</Th>
           <Th isNumeric width="300px">Quantity</Th>

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -91,7 +91,7 @@ const TokenTransfer = ({ transfersQuery, token }: Props) => {
         <Hide below="lg" ssr={ false }>
           <TokenTransferTable
             data={ items }
-            top={ 80 }
+            top={ isPaginationVisible ? 80 : 0 }
             // token transfers query depends on token data
             // so if we are here, we definitely have token data
             token={ token as TokenInfo }

ui/tx/TxTokenTransfer.tsx

@@ -84,7 +84,7 @@ const TxTokenTransfer = () => {
     return (
       <>
         <Hide below="lg" ssr={ false }>
-          <TokenTransferTable data={ items } top={ 80 }/>
+          <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 }/>
         </Hide>
         <Show below="lg" ssr={ false }>
           <TokenTransferList data={ items }/>