Element paddings updates (#1929)

* update paddings on homepage

* update styles for network menu

* search input paddings updates

* update action bar paddings

* update sepolia preset

* fix scroll to active tab

* update padding for navigation menu

* add comment

* update screenshots

* fix screenshots

configs/envs/.env.eth_sepolia

@@ -47,7 +47,11 @@ NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_AUTH_URL=http://localhost:3000/login
 NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com

theme/components/Input.ts

@@ -29,6 +29,20 @@ const size = {
     h: '40px',
     borderRadius: 'base',
   }),
+  // TEMPORARY INPUT SIZE!!!
+  // soon we will migrate to the new size and get rid off this one
+  // lg -> 60
+  // md -> 48
+  // sm -> 40
+  // xs ->32
+  sm_md: defineStyle({
+    fontSize: 'md',
+    lineHeight: '24px',
+    px: '8px',
+    py: '12px',
+    h: '48px',
+    borderRadius: 'base',
+  }),
   md: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',
@@ -71,6 +85,10 @@ const sizes = {
     field: size.sm,
     addon: size.sm,
   }),
+  sm_md: definePartsStyle({
+    field: size.sm_md,
+    addon: size.sm_md,
+  }),
   md: definePartsStyle({
     field: size.md,
     addon: size.md,

ui/address/AddressBlocksValidated.tsx

@@ -14,7 +14,7 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import { currencyUnits } from 'lib/units';
 import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -96,7 +96,7 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true }: Props) => {
       { socketAlert && <SocketAlert mb={ 6 }/> }
       <Hide below="lg" ssr={ false }>
         <Table variant="simple" size="sm">
-          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
+          <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th width="17%">Block</Th>
               <Th width="17%">Age</Th>

ui/address/AddressTokenTransfers.tsx

@@ -20,7 +20,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
@@ -204,7 +204,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
           data={ data?.items }
           baseAddress={ currentAddress }
           showTxInfo
-          top={ isActionBarHidden ? 0 : 80 }
+          top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP }
           enableTimeIncrement
           showSocketInfo={ pagination.page === 1 && !tokenFilter }
           socketInfoAlert={ socketAlert }

ui/address/AddressTxs.tsx

@@ -16,7 +16,7 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
@@ -199,7 +199,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
         showSocketInfo={ addressTxsQuery.pagination.page === 1 }
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
-        top={ 80 }
+        top={ ACTION_BAR_HEIGHT_DESKTOP }
         sorting={ sort }
         setSort={ setSort }
       />

ui/address/AddressWithdrawals.tsx

@@ -6,7 +6,7 @@ import useIsMounted from 'lib/hooks/useIsMounted';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -52,7 +52,12 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true }: Props) => {
         )) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <BeaconChainWithdrawalsTable items={ data.items } view="address" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <BeaconChainWithdrawalsTable
+          items={ data.items }
+          view="address"
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
       </Hide>
     </>
   ) : null ;

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -7,7 +7,7 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import type { ResourceError } from 'lib/api/resources';
 import { currencyUnits } from 'lib/units';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -27,7 +27,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     <>
       <Hide below="lg" ssr={ false }>
         <Table variant="simple" size="sm">
-          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
+          <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th width="20%">Block</Th>
               <Th width="20%">Txn</Th>

ui/address/internals/AddressIntTxsTable.tsx

@@ -19,7 +19,7 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
       <Table variant="simple" size="sm">
-        <Thead top={ 80 }>
+        <Thead top={ 68 }>
           <Tr>
             <Th width="15%">Parent txn hash</Th>
             <Th width="15%">Type</Th>

ui/block/BlockWithdrawals.tsx

@@ -24,7 +24,7 @@ const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
         <BeaconChainWithdrawalsTable
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
-          top={ blockWithdrawalsQuery.pagination.isVisible ? 80 : 0 }
+          top={ blockWithdrawalsQuery.pagination.isVisible ? 76 : 0 }
           view="block"
         />
       </Hide>

ui/blocks/BlocksContent.tsx

@@ -95,7 +95,7 @@ const BlocksContent = ({ type, query }: Props) => {
       <Box display={{ base: 'none', lg: 'block' }}>
         <BlocksTable
           data={ query.data.items }
-          top={ query.pagination.isVisible ? 80 : 0 }
+          top={ query.pagination.isVisible ? 76 : 0 }
           page={ query.pagination.page }
           isLoading={ query.isPlaceholderData }
           showSocketInfo={ query.pagination.page === 1 }

ui/home/LatestBlocks.tsx

@@ -77,17 +77,7 @@ const LatestBlocks = () => {
 
     content = (
       <>
-        { statsQueryResult.data?.network_utilization_percentage !== undefined && (
-          <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mb={{ base: 6, lg: 3 }} display="inline-block">
-            <Text as="span" fontSize="sm">
-              Network utilization:{ nbsp }
-            </Text>
-            <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
-              { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
-            </Text>
-          </Skeleton>
-        ) }
-        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
           <AnimatePresence initial={ false } >
             { dataToShow.map(((block, index) => (
               <LatestBlocksItem
@@ -107,8 +97,20 @@ const LatestBlocks = () => {
 
   return (
     <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
-      { content }
+      <Heading as="h4" size="sm">Latest blocks</Heading>
+      { statsQueryResult.data?.network_utilization_percentage !== undefined && (
+        <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mt={ 1 } display="inline-block">
+          <Text as="span" fontSize="sm">
+              Network utilization:{ nbsp }
+          </Text>
+          <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
+            { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
+          </Text>
+        </Skeleton>
+      ) }
+      <Box mt={ 3 }>
+        { content }
+      </Box>
     </Box>
   );
 };

ui/home/LatestBlocksItem.tsx

@@ -34,7 +34,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
       borderRadius="md"
       border="1px solid"
       borderColor="divider"
-      p={ 6 }
+      p={ 3 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
         <BlockEntity

ui/home/LatestTxs.tsx

@@ -44,7 +44,7 @@ const LatestTransactions = () => {
           ))) }
         </Box>
         <AddressHighlightProvider>
-          <Box mb={ 4 } display={{ base: 'none', lg: 'block' }}>
+          <Box mb={ 3 } display={{ base: 'none', lg: 'block' }}>
             { data.slice(0, txsCount).map(((tx, index) => (
               <LatestTxsItem
                 key={ tx.hash + (isPlaceholderData ? index : '') }

ui/home/LatestZkEvmL2Batches.tsx

@@ -61,7 +61,7 @@ const LatestZkEvmL2Batches = () => {
 
     content = (
       <>
-        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
+        <VStack spacing={ 2 } mb={ 3 } overflow="hidden" alignItems="stretch">
           <AnimatePresence initial={ false } >
             { dataToShow.map(((batch, index) => (
               <LatestZkevmL2BatchItem
@@ -81,7 +81,7 @@ const LatestZkEvmL2Batches = () => {
 
   return (
     <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest batches</Heading>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest batches</Heading>
       { content }
     </Box>
   );

ui/home/LatestZkevmL2BatchItem.tsx

@@ -32,7 +32,7 @@ const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
       borderRadius="md"
       border="1px solid"
       borderColor="divider"
-      p={ 6 }
+      p={ 3 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
         <BatchEntityL2

ui/home/Stats.tsx

@@ -164,8 +164,8 @@ const Stats = () => {
     <Grid
       gridTemplateColumns={{ lg: `repeat(${ itemsCount }, 1fr)`, base: '1fr 1fr' }}
       gridTemplateRows={{ lg: 'none', base: undefined }}
-      gridGap="10px"
-      marginTop="24px"
+      gridGap={{ base: 1, lg: 2 }}
+      marginTop={ 3 }
     >
       { content }
     </Grid>

ui/home/Transactions.tsx

@@ -9,6 +9,10 @@ import LatestWatchlistTxs from 'ui/home/LatestWatchlistTxs';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
 const rollupFeature = config.features.rollup;
 
+const TAB_LIST_PROPS = {
+  mb: { base: 3, lg: 3 },
+};
+
 const TransactionsHome = () => {
   const hasAccount = useHasAccount();
   if ((rollupFeature.isEnabled && rollupFeature.type === 'optimistic') || hasAccount) {
@@ -19,15 +23,15 @@ const TransactionsHome = () => {
     ].filter(Boolean);
     return (
       <>
-        <Heading as="h4" size="sm" mb={ 4 }>Transactions</Heading>
-        <TabsWithScroll tabs={ tabs } lazyBehavior="keepMounted"/>
+        <Heading as="h4" size="sm" mb={ 3 }>Transactions</Heading>
+        <TabsWithScroll tabs={ tabs } lazyBehavior="keepMounted" tabListProps={ TAB_LIST_PROPS }/>
       </>
     );
   }
 
   return (
     <>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
+      <Heading as="h4" size="sm" mb={ 3 }>Latest transactions</Heading>
       <LatestTxs/>
     </>
   );

ui/home/indicators/ChainIndicators.tsx

@@ -94,7 +94,7 @@ const ChainIndicators = () => {
       flexDir={{ base: 'column', lg: 'row' }}
       w="100%"
       alignItems="stretch"
-      mt={ 8 }
+      mt={{ base: 1, lg: 3 }}
     >
       <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
         <Flex alignItems="center">

ui/nameDomains/NameDomainsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { EnsDomainLookupResponse } from 'types/api/ens';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
@@ -21,7 +22,7 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
 
   return (
     <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="25%">Domain</Th>
           <Th width="25%">Address</Th>

ui/pages/Accounts.tsx

@@ -6,7 +6,7 @@ import { TOP_ADDRESS } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
 import AddressesListItem from 'ui/addresses/AddressesListItem';
 import AddressesTable from 'ui/addresses/AddressesTable';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -48,7 +48,7 @@ const Accounts = () => {
     <>
       <Hide below="lg" ssr={ false }>
         <AddressesTable
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           items={ data.items }
           totalSupply={ totalSupply }
           pageStartIndex={ pageStartIndex }

ui/pages/Address.tsx

@@ -218,7 +218,7 @@ const AddressPageContent = () => {
 
   const content = (addressQuery.isError || addressQuery.isDegradedData) ?
     null :
-    <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }} isLoading={ isTabsLoading }/>;
+    <RoutedTabs tabs={ tabs } tabListProps={{ mt: 6 }} isLoading={ isTabsLoading }/>;
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');

ui/pages/BeaconChainWithdrawals.tsx

@@ -8,6 +8,7 @@ import getCurrencyValue from 'lib/getCurrencyValue';
 import { currencyUnits } from 'lib/units';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -50,7 +51,12 @@ const Withdrawals = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <BeaconChainWithdrawalsTable items={ data.items } view="list" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <BeaconChainWithdrawalsTable
+          items={ data.items }
+          view="list"
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ isPlaceholderData }
+        />
       </Hide>
     </>
   ) : null;

ui/pages/Block.tsx

@@ -29,7 +29,8 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 3,
   marginTop: -5,
 };
 
@@ -62,7 +63,7 @@ const BlockPageContent = () => {
       component: (
         <>
           { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
-          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
+          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ 76 }/>
         </>
       ),
     },
@@ -71,7 +72,7 @@ const BlockPageContent = () => {
         id: 'blob_txs',
         title: 'Blob txns',
         component: (
-          <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
+          <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ 76 }/>
         ),
       } : null,
     config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?

ui/pages/Blocks.tsx

@@ -15,7 +15,8 @@ import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 3,
   marginTop: -5,
 };
 

ui/pages/Home.tsx

-import { Box, Heading, Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -20,21 +20,22 @@ const Home = () => {
       <Box
         w="100%"
         background={ config.UI.homepage.plate.background }
-        borderRadius="24px"
-        padding={{ base: '24px', lg: '48px' }}
+        borderRadius={{ base: 'md', lg: 'xl' }}
+        px={{ base: 4, lg: 10 }}
+        py={{ base: 3, lg: 8 }}
         minW={{ base: 'unset', lg: '900px' }}
         data-label="hero plate"
       >
-        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between" alignItems="center">
-          <Heading
+        <Flex mb={{ base: 2, lg: 6 }} justifyContent="space-between" alignItems="center">
+          <Box
             as="h1"
-            size={{ base: 'md', lg: 'xl' }}
-            lineHeight={{ base: '32px', lg: '50px' }}
+            fontSize={{ base: '18px', lg: '40px' }}
+            lineHeight={{ base: '24px', lg: '48px' }}
             fontWeight={ 600 }
             color={ config.UI.homepage.plate.textColor }
           >
             { config.chain.name } explorer
-          </Heading>
+          </Box>
           <Box display={{ base: 'none', lg: 'flex' }}>
             { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
             { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
@@ -44,8 +45,8 @@ const Home = () => {
       </Box>
       <Stats/>
       <ChainIndicators/>
-      <AdBanner mt={{ base: 6, lg: 8 }} mx="auto" display="flex" justifyContent="center"/>
-      <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
+      <AdBanner mt={ 6 } mx="auto" display="flex" justifyContent="center"/>
+      <Flex mt={ 6 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
         { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? <LatestZkEvmL2Batches/> : <LatestBlocks/> }
         <Box flexGrow={ 1 }>
           <Transactions/>

ui/pages/OptimisticL2Deposits.tsx

@@ -7,6 +7,7 @@ import { L2_DEPOSIT_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import OptimisticDepositsListItem from 'ui/deposits/optimisticL2/OptimisticDepositsListItem';
 import OptimisticDepositsTable from 'ui/deposits/optimisticL2/OptimisticDepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -48,7 +49,7 @@ const OptimisticL2Deposits = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticDepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticDepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/OptimisticL2OutputRoots.tsx

@@ -6,6 +6,7 @@ import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import OptimisticL2OutputRootsListItem from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem';
 import OptimisticL2OutputRootsTable from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -46,7 +47,7 @@ const OptimisticL2OutputRoots = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticL2OutputRootsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticL2OutputRootsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/OptimisticL2TxnBatches.tsx

@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { nbsp } from 'lib/html-entities';
 import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -47,7 +48,7 @@ const OptimisticL2TxnBatches = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticL2TxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/OptimisticL2Withdrawals.tsx

@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,7 @@ const OptimisticL2Withdrawals = () => {
         />
       ))) }</Show>
       <Hide below="lg" ssr={ false }>
-        <OptimisticL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OptimisticL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/SearchResults.tsx

@@ -8,7 +8,7 @@ import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultsInput from 'ui/searchResults/SearchResultsInput';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -113,7 +113,7 @@ const SearchResultsPageContent = () => {
         </Show>
         <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="md" fontWeight={ 500 }>
-            <Thead top={ pagination.isVisible ? 80 : 0 }>
+            <Thead top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
               <Tr>
                 <Th width="30%">Search result</Th>
                 <Th width="35%"/>

ui/pages/ShibariumDeposits.tsx

@@ -7,6 +7,7 @@ import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
 import DepositsListItem from 'ui/deposits/shibarium/DepositsListItem';
 import DepositsTable from 'ui/deposits/shibarium/DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -47,7 +48,7 @@ const L2Deposits = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <DepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/ShibariumWithdrawals.tsx

@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,7 @@ const L2Withdrawals = () => {
         />
       ))) }</Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/Token.tsx

@@ -217,8 +217,8 @@ const TokenPageContent = () => {
     }
 
     return {
-      mt: 3,
-      py: 5,
+      pt: 6,
+      pb: 3,
       marginBottom: 0,
       boxShadow: activeTabIndex === 2 && isSticky ? 'action_bar' : 'none',
     };

ui/pages/Transactions.tsx

@@ -20,7 +20,8 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 3,
   marginTop: -5,
 };
 
@@ -96,6 +97,7 @@ const Transactions = () => {
           showSocketInfo={ txsValidatedQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ 76 }
         /> },
     {
       id: 'pending',
@@ -107,6 +109,7 @@ const Transactions = () => {
           showSocketInfo={ txsPendingQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ 76 }
         />
       ),
     },
@@ -119,6 +122,7 @@ const Transactions = () => {
           showSocketInfo={ txsWithBlobsQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
+          top={ 76 }
         />
       ),
     },

ui/pages/Watchlist.tsx

@@ -9,7 +9,7 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
 import { WATCH_LIST_ITEM_WITH_TOKEN_INFO } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -102,7 +102,7 @@ const WatchList: React.FC = () => {
             isLoading={ isPlaceholderData }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
-            top={ pagination.isVisible ? 80 : 0 }
+            top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           />
         </Box>
       </>

ui/pages/ZkEvmL2Deposits.tsx

@@ -7,6 +7,7 @@ import { generateListStub } from 'stubs/utils';
 import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2';
 import ZkEvmL2DepositsListItem from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem';
 import ZkEvmL2DepositsTable from 'ui/deposits/zkEvmL2/ZkEvmL2DepositsTable';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -42,7 +43,7 @@ const ZkEvmL2Deposits = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <ZkEvmL2DepositsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/ZkEvmL2TxnBatches.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,9 @@ const ZkEvmL2TxnBatches = () => {
           />
         ))) }
       </Show>
-      <Hide below="lg" ssr={ false }><ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }>
+        <ZkEvmTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
     </>
   ) : null;
 

ui/pages/ZkEvmL2Withdrawals.tsx

@@ -5,6 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -42,7 +43,7 @@ const ZkEvmL2Withdrawals = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <ZkEvmL2WithdrawalsTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;

ui/pages/ZkSyncL2TxnBatches.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import { generateListStub } from 'stubs/utils';
 import { ZKSYNC_L2_TXN_BATCHES_ITEM } from 'stubs/zkSyncL2';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -45,7 +46,9 @@ const ZkSyncL2TxnBatches = () => {
           />
         ))) }
       </Show>
-      <Hide below="lg" ssr={ false }><ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }>
+        <ZkSyncTxnBatchesTable items={ data.items } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 } isLoading={ isPlaceholderData }/>
+      </Hide>
     </>
   ) : null;
 

ui/privateTags/PrivateAddressTags.tsx

@@ -6,7 +6,7 @@ import type { AddressTag } from 'types/api/account';
 import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType';
 import { PRIVATE_TAG_ADDRESS } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -74,7 +74,7 @@ const PrivateAddressTags = () => {
           data={ addressTagsData?.items }
           onDeleteClick={ onDeleteClick }
           onEditClick={ onEditClick }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
         />
       </Box>
     </>

ui/privateTags/PrivateTransactionTags.tsx

@@ -5,7 +5,7 @@ import type { TransactionTag } from 'types/api/account';
 
 import { PRIVATE_TAG_TX } from 'stubs/account';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -76,7 +76,7 @@ const PrivateTransactionTags = () => {
           isLoading={ isPlaceholderData }
           onDeleteClick={ onDeleteClick }
           onEditClick={ onEditClick }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
         />
       </Box>
     </>

ui/shared/ActionBar.tsx

@@ -12,6 +12,8 @@ type Props = {
 
 const TOP_UP = 106;
 const TOP_DOWN = 0;
+export const ACTION_BAR_HEIGHT_DESKTOP = 24 + 32 + 12;
+export const ACTION_BAR_HEIGHT_MOBILE = 24 + 32 + 24;
 
 const ActionBar = ({ children, className, showShadow }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -27,9 +29,10 @@ const ActionBar = ({ children, className, showShadow }: Props) => {
     <Flex
       className={ className }
       backgroundColor={ bgColor }
-      py={ 6 }
-      mx={{ base: -4, lg: 0 }}
-      px={{ base: 4, lg: 0 }}
+      pt={ 6 }
+      pb={{ base: 6, lg: 3 }}
+      mx={{ base: -3, lg: 0 }}
+      px={{ base: 3, lg: 0 }}
       justifyContent="space-between"
       width={{ base: '100vw', lg: 'unset' }}
       position="sticky"

ui/shared/Tabs/AdaptiveTabsList.tsx

@@ -39,20 +39,22 @@ const AdaptiveTabsList = (props: Props) => {
 
   const { tabsCut, tabsRefs, listRef, rightSlotRef } = useAdaptiveTabs(tabsList, isMobile);
   const isSticky = useIsSticky(listRef, 5, props.stickyEnabled);
-  useScrollToActiveTab({ activeTabIndex: props.activeTabIndex, listRef, tabsRefs, isMobile });
+  useScrollToActiveTab({ activeTabIndex: props.activeTabIndex, listRef, tabsRefs, isMobile, isLoading: props.isLoading });
 
   return (
     <TabList
-      marginBottom={{ base: 6, lg: 8 }}
-      mx={{ base: '-16px', lg: 'unset' }}
-      px={{ base: '16px', lg: 'unset' }}
+      marginBottom={ 6 }
+      mx={{ base: '-12px', lg: 'unset' }}
+      px={{ base: '12px', lg: 'unset' }}
       flexWrap="nowrap"
+      alignItems="center"
       whiteSpace="nowrap"
       ref={ listRef }
       overflowX={{ base: 'auto', lg: 'initial' }}
       overscrollBehaviorX="contain"
       css={{
         'scroll-snap-type': 'x mandatory',
+        'scroll-padding-inline': '12px', // mobile page padding
         // hide scrollbar
         '&::-webkit-scrollbar': { /* Chromiums */
           display: 'none',

ui/shared/Tabs/useScrollToActiveTab.tsx

@@ -5,19 +5,23 @@ interface Props {
   tabsRefs: Array<React.RefObject<HTMLButtonElement>>;
   listRef: React.RefObject<HTMLDivElement>;
   isMobile?: boolean;
+  isLoading?: boolean;
 }
 
-export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef, isMobile }: Props) {
+export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef, isMobile, isLoading }: Props) {
   React.useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
     if (activeTabIndex < tabsRefs.length && isMobile) {
       window.setTimeout(() => {
         const activeTabRef = tabsRefs[activeTabIndex];
 
         if (activeTabRef.current && listRef.current) {
           const activeTabRect = activeTabRef.current.getBoundingClientRect();
-
           listRef.current.scrollTo({
-            left: activeTabRect.left + listRef.current.scrollLeft - 16,
+            left: activeTabRect.left,
             behavior: 'smooth',
           });
         }
@@ -27,5 +31,5 @@ export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef
     }
   // run only when tab index or device type is changed
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ activeTabIndex, isMobile ]);
+  }, [ activeTabIndex, isMobile, isLoading ]);
 }

ui/shared/layout/components/Content.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const Content = ({ children, className }: Props) => {
   return (
-    <Box pt={{ base: 0, lg: 8 }} as="main" className={ className }>
+    <Box pt={{ base: 0, lg: 6 }} as="main" className={ className }>
       { children }
     </Box>
   );

ui/shared/layout/components/MainColumn.tsx

@@ -13,9 +13,9 @@ const MainColumn = ({ children, className }: Props) => {
       flexDir="column"
       flexGrow={ 1 }
       w={{ base: '100%', lg: 'auto' }}
-      paddingX={{ base: 4, lg: 12 }}
+      paddingX={{ base: 3, lg: 12 }}
       paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
-      paddingBottom={ 10 }
+      paddingBottom={ 8 }
     >
       { children }
     </Flex>

ui/snippets/footer/Footer.tsx

@@ -141,7 +141,7 @@ const Footer = () => {
   const containerProps: GridProps = {
     as: 'footer',
     px: { base: 4, lg: 12 },
-    py: { base: 4, lg: 9 },
+    py: { base: 4, lg: 8 },
     borderTop: '1px solid',
     borderColor: 'divider',
     gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' },

ui/snippets/header/Burger.tsx

@@ -45,7 +45,7 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
         autoFocus={ false }
       >
         <DrawerOverlay/>
-        <DrawerContent maxWidth="260px">
+        <DrawerContent maxWidth="330px">
           <DrawerBody p={ 6 } display="flex" flexDirection="column">
             { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="37px" color="red.400" alignSelf="flex-start"/> }
             <Flex alignItems="center" justifyContent="space-between">

ui/snippets/header/HeaderMobile.tsx

@@ -36,7 +36,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
     >
       <Flex
         as="header"
-        paddingX={ 4 }
+        paddingX={ 3 }
         paddingY={ 2 }
         bgColor={ bgColor }
         width="100%"

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -68,7 +68,7 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
         </PopoverTrigger>
         <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
           <PopoverBody p={ 4 }>
-            <Text variant="secondary" fontSize="sm" mb={ 2 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+            <Text variant="secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
               { item.text }
             </Text>
             <VStack spacing={ 1 } alignItems="start">

ui/snippets/navigation/NavigationDesktop.tsx

@@ -82,7 +82,7 @@ const NavigationDesktop = () => {
         <NetworkLogo isCollapsed={ isCollapsed }/>
         { Boolean(config.UI.sidebar.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
       </Box>
-      <Box as="nav" mt={ 8 } w="100%">
+      <Box as="nav" mt={ 6 } w="100%">
         <VStack as="ul" spacing="1" alignItems="flex-start">
           { mainNavItems.map((item) => {
             if (isGroupItem(item)) {
@@ -94,7 +94,7 @@ const NavigationDesktop = () => {
         </VStack>
       </Box>
       { hasAccount && (
-        <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }>
+        <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 3 } pt={ 3 }>
           <VStack as="ul" spacing="1" alignItems="flex-start">
             { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
           </VStack>

ui/snippets/navigation/NavigationMobile.tsx

@@ -9,6 +9,8 @@ import NavLink from 'ui/snippets/navigation/NavLink';
 
 import NavLinkGroupMobile from './NavLinkGroupMobile';
 
+const DRAWER_WIDTH = 330;
+
 interface Props {
   onNavLinkClick?: () => void;
   isMarketplaceAppPage?: boolean;
@@ -20,17 +22,17 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
   const mainX = useMotionValue(0);
-  const subX = useMotionValue(250);
+  const subX = useMotionValue(DRAWER_WIDTH);
 
   const onGroupItemOpen = (index: number) => () => {
     setOpenedGroupIndex(index);
-    animate(mainX, -250, { ease: 'easeInOut' });
+    animate(mainX, -DRAWER_WIDTH, { ease: 'easeInOut' });
     animate(subX, 0, { ease: 'easeInOut' });
   };
 
   const onGroupItemClose = useCallback(() => {
     animate(mainX, 0, { ease: 'easeInOut' });
-    animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
+    animate(subX, DRAWER_WIDTH, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
   }, [ mainX, subX ]);
 
   const hasAccount = useHasAccount();
@@ -74,8 +76,8 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
         { hasAccount && (
           <Box
             as="nav"
-            mt={ 6 }
-            pt={ 6 }
+            mt={ 3 }
+            pt={ 3 }
             borderTopWidth="1px"
             borderColor="divider"
           >

ui/snippets/navigation/useNavLinkStyleProps.tsx

@@ -14,7 +14,7 @@ export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: P
 
   return {
     itemProps: {
-      py: 2.5,
+      py: '9px',
       display: 'flex',
       color: isActive ? colors.text.active : colors.text.default,
       bgColor: isActive ? colors.bg.active : colors.bg.default,

ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx

-import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork, NetworkGroup } from 'types/networks';
@@ -17,60 +17,62 @@ const NetworkMenuPopup = ({ items, tabs }: Props) => {
 
   const content = !items || items.length === 0 ? (
     <>
-      <Skeleton h="30px" w="120px"/>
-      <Flex mt={ 4 } alignItems="center">
-        <Flex h="40px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
-          <Skeleton h="24px" w="100%"/>
+      <Flex alignItems="center">
+        <Flex h="32px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
+          <Skeleton h="16px" w="100%"/>
         </Flex>
-        <Skeleton h="24px" w="68px" mx={ 4 }/>
-        <Skeleton h="24px" w="45px" mx={ 4 }/>
+        <Skeleton h="16px" w="68px" mx={ 4 }/>
+        <Skeleton h="16px" w="45px" mx={ 4 }/>
       </Flex>
-      <Flex mt={ 8 } flexDir="column" rowGap={ 2 }>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+      <Flex mt={ 3 } flexDir="column" rowGap={ 2 }>
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="120px" ml={ 3 }/>
+          <Skeleton h="16px" w="120px" ml={ 3 }/>
         </Flex>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="180px" ml={ 3 }/>
+          <Skeleton h="16px" w="180px" ml={ 3 }/>
         </Flex>
-        <Flex mx={ 4 } my={ 2 } alignItems="center">
+        <Flex mx={ 3 } my={ 2 } alignItems="center">
           <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="24px" w="150px" ml={ 3 }/>
+          <Skeleton h="16px" w="150px" ml={ 3 }/>
         </Flex>
       </Flex>
     </>
   ) : (
-    <>
-      <Text as="h4" fontSize="18px" lineHeight="30px" fontWeight="500">Networks</Text>
-      <Tabs variant="soft-rounded" mt={ 4 } isLazy defaultIndex={ selectedTab !== -1 ? selectedTab : undefined }>
-        { tabs.length > 1 && (
-          <TabList>
-            { tabs.map((tab) => <Tab key={ tab } textTransform="capitalize">{ tab }</Tab>) }
-          </TabList>
-        ) }
-        <TabPanels mt={ 8 }>
-          { tabs.map((tab) => (
-            <TabPanel key={ tab } p={ 0 }>
-              <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
-                { items
-                  .filter((network) => network.group === tab)
-                  .map((network) => (
-                    <NetworkMenuLink
-                      key={ network.title }
-                      { ...network }
-                    />
-                  )) }
-              </VStack>
-            </TabPanel>
-          )) }
-        </TabPanels>
-      </Tabs>
-    </>
+    <Tabs
+      variant="outline"
+      colorScheme="gray"
+      size="sm"
+      isLazy
+      defaultIndex={ selectedTab !== -1 ? selectedTab : undefined }
+    >
+      { tabs.length > 1 && (
+        <TabList columnGap={ 2 }>
+          { tabs.map((tab) => <Tab key={ tab } textTransform="capitalize">{ tab }</Tab>) }
+        </TabList>
+      ) }
+      <TabPanels mt={ 3 }>
+        { tabs.map((tab) => (
+          <TabPanel key={ tab } p={ 0 }>
+            <VStack as="ul" spacing={ 1 } alignItems="stretch" mt={ 4 } maxH="516px" overflowY="scroll">
+              { items
+                .filter((network) => network.group === tab)
+                .map((network) => (
+                  <NetworkMenuLink
+                    key={ network.title }
+                    { ...network }
+                  />
+                )) }
+            </VStack>
+          </TabPanel>
+        )) }
+      </TabPanels>
+    </Tabs>
   );
 
   return (
-    <PopoverContent w="382px">
+    <PopoverContent w="330px">
       <PopoverBody>
         { content }
       </PopoverBody>

ui/snippets/networkMenu/NetworkMenuContentMobile.tsx

@@ -26,27 +26,24 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
   }, []);
 
   const content = !items || items.length === 0 ? (
-    <>
-      <Skeleton h="32px" w="100%"/>
-      <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="60px" ml={ 3 }/>
-        </Flex>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="120px" ml={ 3 }/>
-        </Flex>
-        <Flex mx={ 3 } my={ 2 } alignItems="center">
-          <Skeleton h="30px" w="30px" borderRadius="full"/>
-          <Skeleton h="20px" w="80px" ml={ 3 }/>
-        </Flex>
+    <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="60px" ml={ 3 }/>
       </Flex>
-    </>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="120px" ml={ 3 }/>
+      </Flex>
+      <Flex mx={ 3 } my={ 2 } alignItems="center">
+        <Skeleton h="30px" w="30px" borderRadius="full"/>
+        <Skeleton h="20px" w="80px" ml={ 3 }/>
+      </Flex>
+    </Flex>
   ) : (
     <>
       { tabs.length > 1 && (
-        <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } mb={ 6 }>
+        <Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } mb={ 3 }>
           { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
         </Select>
       ) }

ui/snippets/networkMenu/NetworkMenuLink.tsx

@@ -32,8 +32,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
       <Flex
         as="a"
         href={ url }
-        px={ isMobile ? 3 : 4 }
-        py={ 2 }
+        px={ 3 }
+        py="9px"
         alignItems="center"
         cursor="pointer"
         pointerEvents={ isActive ? 'none' : 'initial' }

ui/snippets/networkMenu/useColors.ts

@@ -5,18 +5,18 @@ export default function useColors() {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
       active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
-      hover: useColorModeValue('blue.600', 'link_hovered'),
+      hover: 'link_hovered',
     },
     iconPlaceholder: {
       'default': useColorModeValue('blackAlpha.100', 'whiteAlpha.300'),
     },
     bg: {
       'default': 'transparent',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
     border: {
       'default': 'divider',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'whiteAlpha.100'),
     },
   };
 }

ui/snippets/searchBar/SearchBar.tsx

@@ -95,7 +95,7 @@ const SearchBar = ({ isHomepage }: Props) => {
     onClose();
   }, [ pathname, searchTerm, onClose ]);
 
-  const menuPaddingX = isMobile && !isHomepage ? 32 : 0;
+  const menuPaddingX = isMobile && !isHomepage ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
     menuWidth.current = (inputRef.current?.getBoundingClientRect().width || 0) - menuPaddingX;
   }, [ menuPaddingX ]);
@@ -123,7 +123,7 @@ const SearchBar = ({ isHomepage }: Props) => {
         autoFocus={ false }
         onClose={ onClose }
         placement="bottom-start"
-        offset={ isMobile && !isHomepage ? [ 16, -4 ] : undefined }
+        offset={ isMobile && !isHomepage ? [ 12, -4 ] : undefined }
         isLazy
       >
         <PopoverTrigger>

ui/snippets/searchBar/SearchBarInput.tsx

@@ -79,7 +79,7 @@ const SearchBarInput = (
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}
       left="0"
       zIndex={{ base: isHomepage ? 'auto' : '-1', lg: isSuggestOpen ? 'popover' : 'auto' }}
-      paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
+      paddingX={{ base: isHomepage ? 0 : 3, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
       paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}
       boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
@@ -88,7 +88,7 @@ const SearchBarInput = (
       transitionDuration="normal"
       transitionTimingFunction="ease"
     >
-      <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
+      <InputGroup size={{ base: 'sm', lg: isHomepage ? 'sm_md' : 'sm' }}>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
           <IconSvg name="search" boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
@@ -112,7 +112,7 @@ const SearchBarInput = (
           value={ value }
         />
         { value && (
-          <InputRightElement top={{ base: isHomepage ? '18px' : 2, lg: '18px' }} right={ 2 }>
+          <InputRightElement top={{ base: 2, lg: isHomepage ? 3 : 2 }} right={ 2 }>
             <ClearButton onClick={ onClear }/>
           </InputRightElement>
         ) }

ui/snippets/topBar/TopBar.tsx

@@ -15,7 +15,7 @@ const TopBar = () => {
   return (
     <Flex
       py={ 2 }
-      px={ 6 }
+      px={{ base: 3, lg: 6 }}
       bgColor={ bgColor }
       justifyContent="space-between"
       alignItems="center"

ui/token/TokenHolders/TokenHolders.tsx

@@ -52,7 +52,7 @@ const TokenHoldersContent = ({ holdersQuery, token, shouldRender = true }: Props
         <TokenHoldersTable
           data={ items }
           token={ token }
-          top={ holdersQuery.pagination.isVisible ? 80 : 0 }
+          top={ holdersQuery.pagination.isVisible ? 76 : 0 }
           isLoading={ holdersQuery.isPlaceholderData }
         />
       </Box>

ui/token/TokenHolders/TokenHoldersTable.pw.tsx

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

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -67,7 +67,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token, shouldRender = true }:
       <Box display={{ base: 'none', lg: 'block' }}>
         <TokenTransferTable
           data={ data?.items }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? 76 : 0 }
           showSocketInfo={ pagination.page === 1 }
           socketInfoAlert={ socketAlert }
           socketInfoNum={ newItemsCount }

ui/tokens/TokensTable.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { TokenInfo } from 'types/api/token';
 import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -36,7 +37,7 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) =>
 
   return (
     <Table>
-      <Thead top={ 80 }>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th w="50%">Token</Th>
           <Th isNumeric w="15%">

ui/tx/TxBlobs.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { TX_BLOB } from 'stubs/blobs';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -35,7 +35,7 @@ const TxBlobs = ({ txQuery }: Props) => {
   const content = data ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 80 : 0 }/>
+        <TxBlobsTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TxBlobsList data={ data.items } isLoading={ isPlaceholderData }/>

ui/tx/TxInternals.tsx

@@ -7,7 +7,7 @@ import compareBns from 'lib/bigint/compareBns';
 // import { apos } from 'lib/html-entities';
 import { INTERNAL_TX } from 'stubs/internalTx';
 import { generateListStub } from 'stubs/utils';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 // import FilterInput from 'ui/shared/filters/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
@@ -109,7 +109,7 @@ const TxInternals = ({ txQuery }: Props) => {
           data={ filteredData }
           sort={ sort }
           onSortToggle={ handleSortToggle }
-          top={ pagination.isVisible ? 80 : 0 }
+          top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ isPlaceholderData }
         />
       </Hide>

ui/tx/TxState.tsx

@@ -2,7 +2,7 @@ import { Accordion, Hide, Show, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { TX_STATE_CHANGES } from 'stubs/txStateChanges';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
@@ -40,7 +40,7 @@ const TxState = ({ txQuery }: Props) => {
   const content = data ? (
     <Accordion allowMultiple defaultIndex={ [] }>
       <Hide below="lg" ssr={ false }>
-        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 80 : 0 }/>
+        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TxStateList data={ data.items } isLoading={ isPlaceholderData }/>

ui/tx/TxTokenTransfer.tsx

@@ -9,7 +9,7 @@ import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import { apos } from 'lib/html-entities';
 import { TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -73,7 +73,7 @@ const TxTokenTransfer = ({ txQuery, tokenTransferFilter }: Props) => {
   const content = tokenTransferQuery.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : 80 } isLoading={ tokenTransferQuery.isPlaceholderData }/>
+        <TokenTransferTable data={ items } top={ isActionBarHidden ? 0 : ACTION_BAR_HEIGHT_DESKTOP } isLoading={ tokenTransferQuery.isPlaceholderData }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TokenTransferList data={ items } isLoading={ tokenTransferQuery.isPlaceholderData }/>

ui/txs/TxsContent.tsx

@@ -6,6 +6,7 @@ import type { Transaction, TransactionsSortingField, TransactionsSortingValue }
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
@@ -88,7 +89,7 @@ const TxsContent = ({
           showSocketInfo={ showSocketInfo }
           socketInfoAlert={ socketInfoAlert }
           socketInfoNum={ socketInfoNum }
-          top={ top || query.pagination.isVisible ? 80 : 0 }
+          top={ top || (query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0) }
           currentAddress={ currentAddress }
           enableTimeIncrement={ enableTimeIncrement }
           isLoading={ isPlaceholderData }

ui/txs/TxsWatchlist.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const TxsWatchlist = ({ query }: Props) => {
   useRedirectForInvalidAuthToken();
-  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false }/>;
+  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false } top={ 76 }/>;
 };
 
 export default TxsWatchlist;

ui/userOps/UserOpsContent.tsx

 import { Hide, Show } from '@chakra-ui/react';
 import React from 'react';
 
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -26,7 +26,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
       <Hide below="lg" ssr={ false }>
         <UserOpsTable
           items={ query.data.items }
-          top={ query.pagination.isVisible ? 80 : 0 }
+          top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ query.isPlaceholderData }
           showTx={ showTx }
           showSender={ showSender }

ui/validators/ValidatorsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { Validator, ValidatorsSorting, ValidatorsSortingField, ValidatorsSortingValue } from 'types/api/validators';
 
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -27,7 +28,7 @@ const ValidatorsTable = ({ data, sort, setSorting, isLoading }: Props) => {
 
   return (
     <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Validator’s address</Th>
           <Th width="25%">

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -5,6 +5,7 @@ import type { VerifiedContract } from 'types/api/contracts';
 import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
 
 import { currencyUnits } from 'lib/units';
+import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import IconSvg from 'ui/shared/IconSvg';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -29,7 +30,7 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
 
   return (
     <Table variant="simple" size="sm">
-      <Thead top={ 80 }>
+      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="50%">Contract</Th>
           <Th width="130px" isNumeric>