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,9 +97,21 @@ const LatestBlocks = () => {
 
   return (
     <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
-      <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
+      <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;