Merge pull request #2304 from blockscout/fe-2201

Table: table header left/right hor padding
blockscout · Oct 22, 2024 · 49bfade · 49bfade
2 parents f21dc95 + c7658e7
commit 49bfade
Show file tree

Hide file tree

Showing 136 changed files with 69 additions and 74 deletions.
diff --git a/theme/components/Table.ts b/theme/components/Table.ts
@@ -30,39 +30,30 @@ const variantSimple = definePartsStyle((props) => {
 });
 
 const sizes = {
-  md: definePartsStyle({
-    th: {
-      px: 4,
-      fontSize: 'sm',
-    },
-    td: {
-      p: 4,
-    },
-  }),
   sm: definePartsStyle({
-    th: {
-      px: '10px',
-      py: '10px',
-      fontSize: 'sm',
-    },
-    td: {
-      px: '10px',
-      py: 4,
-      fontSize: 'sm',
-      fontWeight: 500,
-    },
-  }),
-  xs: definePartsStyle({
     th: {
       px: '6px',
       py: '10px',
       fontSize: 'sm',
+      _first: {
+        pl: 3,
+      },
+      _last: {
+        pr: 3,
+      },
     },
     td: {
       px: '6px',
       py: 4,
       fontSize: 'sm',
       fontWeight: 500,
+      lineHeight: 5,
+      _first: {
+        pl: 3,
+      },
+      _last: {
+        pr: 3,
+      },
     },
   }),
 };
@@ -104,6 +95,10 @@ const Table = defineMultiStyleConfig({
   baseStyle,
   sizes,
   variants,
+  defaultProps: {
+    size: 'sm',
+    variant: 'simple',
+  },
 });
 
 export default Table;
diff --git a/ui/address/AddressAccountHistory.tsx b/ui/address/AddressAccountHistory.tsx
@@ -87,7 +87,7 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled
       </Hide>
 
       <Show above="lg" ssr={ false }>
-        <Table variant="simple" >
+        <Table>
           <TheadSticky top={ 75 }>
             <Tr>
               <Th width="120px">

diff --git a/ui/address/AddressBlocksValidated.tsx b/ui/address/AddressBlocksValidated.tsx
@@ -105,7 +105,7 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled
   const content = query.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+        <Table style={{ tableLayout: 'auto' }}>
           <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th>Block</Th>

diff --git a/...reenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/...reenshots__/AddressCoinBalance.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/...ess/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png b/...ess/__screenshots__/AddressCoinBalance.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/...dress/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png b/...dress/__screenshots__/AddressEpochRewards.pw.tsx_default_base-view-mobile-1.png
diff --git a/...ddress/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png b/...ddress/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png
diff --git a/.../AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png b/.../AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png
diff --git a/...s__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png b/...s__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png
diff --git a/...ress/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png b/...ress/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png
diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png
diff --git a/...s/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png b/...s/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png
diff --git a/...s/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png b/...s/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png
diff --git a/ui/address/coinBalance/AddressCoinBalanceHistory.tsx b/ui/address/coinBalance/AddressCoinBalanceHistory.tsx
@@ -26,7 +26,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
   const content = query.data?.items ? (
     <>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm">
+        <Table>
           <Thead top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <Tr>
               <Th width="20%">Block</Th>

diff --git a/ui/address/epochRewards/AddressEpochRewardsTable.tsx b/ui/address/epochRewards/AddressEpochRewardsTable.tsx
@@ -15,7 +15,7 @@ import AddressEpochRewardsTableItem from './AddressEpochRewardsTableItem';
 
 const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px" style={{ tableLayout: 'auto' }}>
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th>Block</Th>

diff --git a/ui/address/internals/AddressIntTxsTable.tsx b/ui/address/internals/AddressIntTxsTable.tsx
@@ -18,7 +18,7 @@ interface Props {
 const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table>
         <Thead top={ 68 }>
           <Tr>
             <Th width="15%">Parent txn hash</Th>

diff --git a/ui/address/mud/AddressMudRecordValues.tsx b/ui/address/mud/AddressMudRecordValues.tsx
@@ -26,9 +26,9 @@ const AddressMudRecordValues = ({ data }: Props) => {
       {
         data?.schema.value_names.map((valName, index) => (
           <Tr key={ valName } backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
-            <Td fontSize="sm" w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
-            <Td fontSize="sm" w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
-            <Td fontSize="sm" wordBreak="break-word" py={ 0 } pb={ 4 }>
+            <Td fontWeight={ 400 } w="100px" py={ 0 } pb={ 4 } pr={ 0 }wordBreak="break-all">{ valName }</Td>
+            <Td fontWeight={ 400 } w="90px" py={ 0 } pb={ 4 } wordBreak="break-all">{ data.schema.value_types[index] }</Td>
+            <Td fontWeight={ 400 } wordBreak="break-word" py={ 0 } pb={ 4 }>
               <Box>
                 { getValueString(data.record.decoded[valName]) }
               </Box>

diff --git a/ui/address/mud/AddressMudRecordsTable.tsx b/ui/address/mud/AddressMudRecordsTable.tsx
@@ -140,7 +140,7 @@ const AddressMudRecordsTable = ({
   return (
     // can't implement both horizontal table scroll and sticky header
     <Box maxW="100%" overflowX={ hasHorizontalScroll ? 'scroll' : 'unset' } whiteSpace="nowrap" ref={ tableRef }>
-      <Table variant="simple" size="sm" style={{ tableLayout: 'fixed' }}>
+      <Table style={{ tableLayout: 'fixed' }}>
         <Thead top={ hasHorizontalScroll ? 0 : top } display={ hasHorizontalScroll ? 'table' : 'table-header-group' } w="100%">
           <Tr >
             { keys.map((keyName, index) => {

diff --git a/ui/address/mud/AddressMudTablesTable.tsx b/ui/address/mud/AddressMudTablesTable.tsx
@@ -18,7 +18,7 @@ type Props = {
 //sorry for the naming
 const AddressMudTablesTable = ({ items, isLoading, top, scrollRef, hash }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+    <Table style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th width="24px"></Th>

diff --git a/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png b/ui/address/mud/__screenshots__/AddressMudRecord.pw.tsx_default_base-view-1.png
diff --git a/...ress/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png b/...ress/mud/__screenshots__/AddressMudRecord.pw.tsx_default_mobile-base-view-1.png
diff --git a/...dress/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png b/...dress/mud/__screenshots__/AddressMudTable.pw.tsx_default_base-view-mobile-1.png
diff --git a/...s/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png b/...s/mud/__screenshots__/AddressMudTable.pw.tsx_default_expanded-view-mobile-1.png
diff --git a/...ddress/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png b/...ddress/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_base-view-mobile-1.png
diff --git a/...ss/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png b/...ss/mud/__screenshots__/AddressMudTable.pw.tsx_mobile_expanded-view-mobile-1.png
diff --git a/...ress/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png b/...ress/mud/__screenshots__/AddressMudTables.pw.tsx_default_base-view-mobile-1.png
diff --git a/...__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png b/...__screenshots__/AddressMudTables.pw.tsx_default_with-schema-opened-mobile-1.png
diff --git a/ui/address/tokens/ERC20TokensTable.tsx b/ui/address/tokens/ERC20TokensTable.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const ERC20TokensTable = ({ data, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="30%">Asset</Th>

diff --git a/ui/addresses/AddressesTable.tsx b/ui/addresses/AddressesTable.tsx
@@ -21,7 +21,7 @@ interface Props {
 const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }: Props) => {
   const hasPercentage = !totalSupply.eq(ZERO);
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="64px">Rank</Th>

diff --git a/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx b/ui/addressesLabelSearch/AddressesLabelSearchTable.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 const AddressesLabelSearchTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="70%">Address</Th>

diff --git a/ui/apiKey/ApiKeyTable/ApiKeyTable.tsx b/ui/apiKey/ApiKeyTable/ApiKeyTable.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 const ApiKeyTable = ({ data, isLoading, onDeleteClick, onEditClick, limit }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <Thead>
         <Tr>
           <Th>{ `API key token (limit ${ limit } keys)` }</Th>

diff --git a/ui/block/epochRewards/BlockEpochElectionRewards.tsx b/ui/block/epochRewards/BlockEpochElectionRewards.tsx
@@ -16,7 +16,7 @@ const BlockEpochElectionRewards = ({ data, isLoading }: Props) => {
     <Box mt={ 8 }>
       <Heading as="h4" size="sm" mb={ 3 }>Election rewards</Heading>
       <Hide below="lg" ssr={ false }>
-        <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+        <Table style={{ tableLayout: 'auto' }}>
           <Thead>
             <Tr>
               <Th width="24px"/>

diff --git a/...__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png b/...__screenshots__/BlockEpochElectionRewards.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx
@@ -40,7 +40,7 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
+      <Table minWidth="1040px" fontWeight={ 500 }>
         <Thead top={ top }>
           <Tr>
             <Th width="150px">Block</Th>

diff --git a/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx b/ui/customAbi/CustomAbiTable/CustomAbiTable.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const CustomAbiTable = ({ data, isLoading, onDeleteClick, onEditClick }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <Thead>
         <Tr>
           <Th>ABI for Smart contract address (0x...)</Th>

diff --git a/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx
@@ -15,7 +15,7 @@ import OptimisticDepositsTableItem from './OptimisticDepositsTableItem';
 
 const OptimisticDepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L1 block No</Th>

diff --git a/ui/deposits/shibarium/DepositsTable.tsx b/ui/deposits/shibarium/DepositsTable.tsx
@@ -15,7 +15,7 @@ import DepositsTableItem from './DepositsTableItem';
 
 const DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L1 block No</Th>

diff --git a/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx b/ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx
@@ -15,7 +15,7 @@ import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
 
 const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>L1 block</Th>

diff --git a/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx b/ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           <Th>Index</Th>

diff --git a/ui/messages/ArbitrumL2MessagesTable.tsx b/ui/messages/ArbitrumL2MessagesTable.tsx
@@ -17,7 +17,7 @@ import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
 
 const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
+    <Table style={{ tableLayout: 'auto' }} minW="950px">
       <Thead top={ top }>
         <Tr>
           { direction === 'to-rollup' && <Th>L1 block</Th> }

diff --git a/ui/mudWorlds/MudWorldsTable.tsx b/ui/mudWorlds/MudWorldsTable.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 const MudWorldsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
+    <Table style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th>Address</Th>

diff --git a/ui/nameDomain/history/NameDomainHistoryTable.tsx b/ui/nameDomain/history/NameDomainHistoryTable.tsx
@@ -22,7 +22,7 @@ const NameDomainHistoryTable = ({ history, domain, isLoading, sort, onSortToggle
   const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ 0 }>
         <Tr>
           <Th width="25%">Txn hash</Th>

diff --git a/ui/nameDomains/NameDomainsTable.tsx b/ui/nameDomains/NameDomainsTable.tsx
@@ -21,7 +21,7 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.toLowerCase().includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th width="25%">Domain</Th>

diff --git a/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="900px">
+    <Table minW="900px">
       <Thead top={ top }>
         <Tr>
           <Th width="160px">L2 output index</Th>

diff --git a/ui/pages/SearchResults.tsx b/ui/pages/SearchResults.tsx
@@ -148,7 +148,7 @@ const SearchResultsPageContent = () => {
           )) }
         </Show>
         <Hide below="lg" ssr={ false }>
-          <Table variant="simple" size="md" fontWeight={ 500 }>
+          <Table fontWeight={ 500 }>
             <Thead top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
               <Tr>
                 <Th width="30%">Search result</Th>

diff --git a/..._screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/..._screenshots__/Accounts.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Accounts.pw.tsx_default_base-view-mobile-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/AccountsLabelSearch.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ArbitrumL2Deposits.pw.tsx_default_base-view-mobile-1.png
diff --git a/...ages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/...ages/__screenshots__/ArbitrumL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
diff --git a/...ges/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/...ges/__screenshots__/ArbitrumL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
diff --git a/...es/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png b/...es/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-txs-tab-1.png
diff --git a/...ges/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png b/...ges/__screenshots__/Block.pw.tsx_default_degradation-view-withdrawals-tab-1.png
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_base-view-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_new-item-from-socket-1.png
diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_socket-error-1.png
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png
diff --git a/...ages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png b/...ages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png
diff --git a/.../__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png b/.../__screenshots__/OptimisticL2DisputeGames.pw.tsx_default_base-view-mobile-1.png
diff --git a/...s/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png b/...s/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png
diff --git a/...es/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/...es/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
diff --git a/...s/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/...s/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
diff --git a/...ts__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png b/...ts__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png
diff --git a/...nshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png b/...nshots__/SearchResults.pw.tsx_default_block-countdown-with-results-mobile-1.png
diff --git a/..._screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png b/..._screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png
diff --git a/...s/__screenshots__/SearchResults.pw.tsx_default_search-by-blob-hash-mobile-1.png b/...s/__screenshots__/SearchResults.pw.tsx_default_search-by-blob-hash-mobile-1.png
diff --git a/.../__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png b/.../__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png
diff --git a/..._screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png b/..._screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png
diff --git a/...__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png b/...__screenshots__/SearchResults.pw.tsx_default_search-by-domain-name-mobile-1.png
diff --git a/...creenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png b/...creenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png
diff --git a/...ges/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png b/...ges/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png
diff --git a/..._screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png b/..._screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png
diff --git a/..._screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png b/..._screenshots__/SearchResults.pw.tsx_default_with-apps-default-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ShibariumDeposits.pw.tsx_default_base-view-mobile-1.png
diff --git a/...ages/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png b/...ages/__screenshots__/ShibariumWithdrawals.pw.tsx_default_base-view-mobile-1.png
diff --git a/.../__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/.../__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png
diff --git a/.../__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png b/.../__screenshots__/Tokens.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-1.png
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_base-view-mobile-dark-mode-2.png
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-1.png
diff --git a/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-2.png b/ui/pages/__screenshots__/Tokens.pw.tsx_default_bridged-tokens-base-view-2.png
diff --git a/ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/UserOps.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsBlackfort.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ValidatorsStability.pw.tsx_default_base-view-mobile-1.png
diff --git a/..._screenshots__/VerifiedAddresses.pw.tsx_default_address-verification-flow-1.png b/..._screenshots__/VerifiedAddresses.pw.tsx_default_address-verification-flow-1.png
diff --git a/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedAddresses.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Deposits.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkEvmL2Withdrawals.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatches.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/privateTags/AddressTagTable/AddressTagTable.tsx b/ui/privateTags/AddressTagTable/AddressTagTable.tsx
@@ -22,7 +22,7 @@ interface Props {
 
 const AddressTagTable = ({ data, onDeleteClick, onEditClick, isLoading, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="60%">Address</Th>

diff --git a/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx b/ui/privateTags/TransactionTagTable/TransactionTagTable.tsx
@@ -22,7 +22,7 @@ interface Props {
 
 const AddressTagTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: Props) => {
   return (
-    <Table variant="simple" minWidth="600px">
+    <Table minWidth="600px">
       <TheadSticky top={ top }>
         <Tr>
           <Th width="75%">Transaction</Th>

diff --git a/ui/shared/SocketNewItemsNotice.tsx b/ui/shared/SocketNewItemsNotice.tsx
@@ -88,7 +88,7 @@ export const Desktop = ({ ...props }: Props) => {
       my={ props.isLoading ? '6px' : 0 }
       { ...props }
     >
-      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 }>{ content }</Td></Tr> }
+      { ({ content }) => <Tr><Td colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</Td></Tr> }
     </SocketNewItemsNotice>
   );
 };

diff --git a/ui/shared/TokenTransfer/TokenTransferTable.tsx b/ui/shared/TokenTransfer/TokenTransferTable.tsx
@@ -34,7 +34,7 @@ const TokenTransferTable = ({
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm" minW="950px">
+      <Table minW="950px">
         <Thead top={ top }>
           <Tr>
             { showTxInfo && <Th width="44px"></Th> }

diff --git a/...enTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png b/...enTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png
diff --git a/...ransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png b/...ransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png
diff --git a/ui/token/TokenHolders/TokenHoldersTable.tsx b/ui/token/TokenHolders/TokenHoldersTable.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const TokenHoldersTable = ({ data, token, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" layout="auto">
+    <Table layout="auto">
       <Thead top={ top }>
         <Tr>
           <Th>Holder</Th>

diff --git a/...lders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-with-IDs-1.png b/...lders/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-with-IDs-1.png
diff --git a/...rs/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png b/...rs/__screenshots__/TokenHoldersTable.pw.tsx_default_base-view-without-IDs-1.png
diff --git a/ui/token/TokenTransfer/TokenTransferTable.tsx b/ui/token/TokenTransfer/TokenTransferTable.tsx
@@ -27,7 +27,7 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm" minW="950px">
+      <Table minW="950px">
         <Thead top={ top }>
           <Tr>
             <Th width="280px">Txn hash</Th>

diff --git a/...TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png b/...TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png
diff --git a/...n/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png b/...n/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png
diff --git a/.../TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png b/.../TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png
diff --git a/ui/tx/TxAssetFlows.tsx b/ui/tx/TxAssetFlows.tsx
@@ -82,7 +82,7 @@ export default function TxAssetFlows(props: FlowViewProps) {
       </Hide>
 
       <Show above="lg">
-        <Table variant="simple" size="sm">
+        <Table>
           <TheadSticky top={ 75 }>
             <Tr>
               <Th>

diff --git a/ui/tx/__screenshots__/TxBlobs.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxBlobs.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/tx/__screenshots__/TxState.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxState.pw.tsx_default_base-view-mobile-1.png
diff --git a/ui/tx/blobs/TxBlobsTable.tsx b/ui/tx/blobs/TxBlobsTable.tsx
@@ -16,7 +16,7 @@ interface Props {
 const TxInternalsTable = ({ data, top, isLoading }: Props) => {
 
   return (
-    <Table variant="simple" size="sm">
+    <Table>
       <Thead top={ top }>
         <Tr>
           <Th width="60%">Blob hash</Th>

diff --git a/ui/tx/internals/TxInternalsTable.tsx b/ui/tx/internals/TxInternalsTable.tsx
@@ -23,7 +23,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table>
         <Thead top={ top }>
           <Tr>
             <Th width="28%">Type</Th>

diff --git a/ui/tx/state/TxStateTable.tsx b/ui/tx/state/TxStateTable.tsx
@@ -21,7 +21,7 @@ interface Props {
 const TxStateTable = ({ data, isLoading, top }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" minWidth="1000px" size="sm" w="100%">
+      <Table minWidth="1000px" w="100%">
         <Thead top={ top }>
           <Tr>
             <Th width="140px">Type</Th>

diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="1000px" style={{ tableLayout: 'auto' }}>
+    <Table minW="1000px" style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
         <Tr>
           <Th>Batch #</Th>