remove dynamic truncation from tables

configs/envs/.env.optimism_goerli

+# Set of ENVs for zkevm (dev only)
+# https://eth.blockscout.com/
+
+# app configuration
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+
+# blockchain parameters
+NEXT_PUBLIC_NETWORK_NAME='OP Goerli'
+NEXT_PUBLIC_NETWORK_SHORT_NAME='OP Goerli'
+NEXT_PUBLIC_NETWORK_ID=420
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.optimism.io
+
+# api configuration
+NEXT_PUBLIC_API_HOST=optimism-goerli.blockscout.com
+NEXT_PUBLIC_API_PORT=80
+NEXT_PUBLIC_API_PROTOCOL=http
+NEXT_PUBLIC_API_BASE_PATH=/
+
+# ui config
+## homepage
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+## sidebar
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
+## footer
+## misc
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+# app features
+NEXT_PUBLIC_APP_INSTANCE=local
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+# NEXT_PUBLIC_AUTH_URL=http://localhost:3000
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
+NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+# rollup
+NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true
+NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
+NEXT_PUBLIC_L1_BASE_URL=https://eth-goerli.blockscout.com/

lib/shortenString.ts

-export default function shortenString(string: string | null) {
+export default function shortenString(string: string | null, charNumber = 8) {
   if (!string) {
     return '';
   }
 
-  if (string.length <= 7) {
+  if (string.length <= charNumber - 1) {
     return string;
   }
 
-  return string.slice(0, 4) + '...' + string.slice(-4);
+  return string.slice(0, charNumber - 4) + '...' + string.slice(-4);
 }

ui/address/tokens/ERC20TokensTableItem.tsx

@@ -43,6 +43,7 @@ const ERC20TokensTableItem = ({
           <AddressEntity
             address={{ hash: token.address }}
             isLoading={ isLoading }
+            truncation="constant"
             noIcon
           />
           <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading } opacity="0"/>

ui/addresses/AddressesListItem.tsx

@@ -35,6 +35,7 @@ const AddressesListItem = ({
           isLoading={ isLoading }
           fontWeight={ 700 }
           mr={ 2 }
+          truncation="constant"
         />
         <Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text_secondary">
           <span>{ index }</span>

ui/blocks/BlocksListItem.tsx

@@ -63,6 +63,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <AddressEntity
             address={ data.miner }
             isLoading={ isLoading }
+            truncation="constant"
           />
         </Flex>
       ) }

ui/blocks/BlocksTableItem.tsx

@@ -70,6 +70,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <AddressEntity
             address={ data.miner }
             isLoading={ isLoading }
+            truncation="constant"
           />
         </Td>
       ) }

ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx

@@ -44,6 +44,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
           hash={ item.l2_tx_hash }
           fontSize="sm"
           lineHeight={ 5 }
+          truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
 
@@ -59,6 +60,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
           hash={ item.l1_tx_hash }
           fontSize="sm"
           lineHeight={ 5 }
+          truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
 
@@ -68,6 +70,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
           address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
           isLoading={ isLoading }
           noCopy
+          truncation="constant"
         />
       </ListItemMobileGrid.Value>
 

ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx

@@ -31,6 +31,7 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
           fontSize="sm"
           lineHeight={ 5 }
           fontWeight={ 600 }
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle">
@@ -39,7 +40,8 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
           hash={ item.l2_tx_hash }
           fontSize="sm"
           lineHeight={ 5 }
-          truncation="constant"
+          truncation="constant_long"
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
@@ -49,7 +51,8 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_tx_hash }
-          truncation="constant"
+          truncation="constant_long"
+          noIcon
           fontSize="sm"
           lineHeight={ 5 }
         />

ui/nameDomain/history/NameDomainHistoryListItem.tsx

@@ -32,7 +32,7 @@ const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHas
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <AddressEntity address={ fromAddress } isLoading={ isLoading }/>
+            <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/>
           </ListItemMobileGrid.Value>
         </>
       ) }

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

@@ -25,7 +25,7 @@ const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHa
         </Skeleton>
       </Td>
       <Td verticalAlign="middle">
-        { fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading }/> }
+        { fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading } truncation="constant"/> }
       </Td>
       <Td verticalAlign="middle">
         { action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx

@@ -8,7 +8,7 @@ import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import HashStringShorten from 'ui/shared/HashStringShorten';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 const rollupFeature = config.features.rollup;
@@ -55,14 +55,15 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
           hash={ item.l1_tx_hash }
           fontSize="sm"
           lineHeight={ 5 }
+          truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Output root</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="space-between">
-          <Skeleton isLoaded={ !isLoading } color="text_secondary" w="calc(100% - 24px)">
-            <HashStringShortenDynamic hash={ item.output_root }/>
+        <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="start">
+          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+            <HashStringShorten hash={ item.output_root } type="long"/>
           </Skeleton>
           <CopyToClipboard text={ item.output_root } isLoading={ isLoading }/>
         </Flex>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx

@@ -18,7 +18,7 @@ const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
     <Table variant="simple" size="sm" minW="900px">
       <Thead top={ top }>
         <Tr>
-          <Th width="140px">L2 output index</Th>
+          <Th width="160px">L2 output index</Th>
           <Th width="20%">Age</Th>
           <Th width="20%">L2 block #</Th>
           <Th width="30%">L1 txn hash</Th>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx

@@ -8,7 +8,7 @@ import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import HashStringShorten from 'ui/shared/HashStringShorten';
 
 const rollupFeature = config.features.rollup;
 
@@ -36,6 +36,7 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
           fontSize="sm"
           lineHeight={ 5 }
           fontWeight={ 600 }
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
@@ -44,12 +45,14 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
           hash={ item.l1_tx_hash }
           fontSize="sm"
           lineHeight={ 5 }
+          noIcon
+          truncation="constant_long"
         />
       </Td>
       <Td verticalAlign="middle">
-        <Flex overflow="hidden" whiteSpace="nowrap" w="100%" alignItems="center">
-          <Skeleton isLoaded={ !isLoading } w="calc(100% - 36px)">
-            <HashStringShortenDynamic hash={ item.output_root }/>
+        <Flex overflow="hidden" w="100%" alignItems="center">
+          <Skeleton isLoaded={ !isLoading }>
+            <HashStringShorten hash={ item.output_root } type="long"/>
           </Skeleton>
           <CopyToClipboard text={ item.output_root } ml={ 2 } isLoading={ isLoading }/>
         </Flex>

ui/shared/EntityTags.tsx

@@ -62,7 +62,7 @@ const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoadin
           }
           <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
             <PopoverTrigger>
-              <Tag onClick={ onToggle }>+{ tags.length - 1 }</Tag>
+              <Tag isLoading={ isLoading }onClick={ onToggle }>+{ tags.length - 1 }</Tag>
             </PopoverTrigger>
             <PopoverContent w="240px">
               <PopoverBody >

ui/shared/HashStringShorten.tsx

@@ -7,17 +7,19 @@ import shortenString from 'lib/shortenString';
 interface Props {
   hash: string;
   isTooltipDisabled?: boolean;
+  type?: 'long' | 'short';
   as?: As;
 }
 
-const HashStringShorten = ({ hash, isTooltipDisabled, as = 'span' }: Props) => {
-  if (hash.length <= 8) {
+const HashStringShorten = ({ hash, isTooltipDisabled, as = 'span', type }: Props) => {
+  const charNumber = type === 'long' ? 16 : 8;
+  if (hash.length <= charNumber) {
     return <chakra.span as={ as }>{ hash }</chakra.span>;
   }
 
   return (
     <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>
-      <chakra.span as={ as }>{ shortenString(hash) }</chakra.span>
+      <chakra.span as={ as }>{ shortenString(hash, charNumber) }</chakra.span>
     </Tooltip>
   );
 };

ui/shared/address/AddressFromTo.tsx

@@ -25,7 +25,7 @@ interface Props {
   noIcon?: boolean;
 }
 
-const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', truncation, noIcon }: Props) => {
+const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', noIcon }: Props) => {
   const mode = useBreakpointValue(
     {
       base: (typeof modeProp === 'object' ? modeProp.base : modeProp),
@@ -52,8 +52,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
             noCopy={ current === from.hash }
             noIcon={ noIcon }
             tokenHash={ tokenHash }
-            truncation={ truncation }
-            maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
+            truncation="constant"
+            maxW="calc(100% - 28px)"
             w="min-content"
           />
         </Flex>
@@ -65,8 +65,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
             noCopy={ current === to.hash }
             noIcon={ noIcon }
             tokenHash={ tokenHash }
-            truncation={ truncation }
-            maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
+            truncation="constant"
+            maxW="calc(100% - 28px)"
             w="min-content"
             ml="28px"
           />
@@ -87,8 +87,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
         noCopy={ isOutgoing }
         noIcon={ noIcon }
         tokenHash={ tokenHash }
-        truncation={ truncation }
-        maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
+        truncation="constant"
+        maxW={ `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
         mr={ isOutgoing ? 4 : 2 }
       />
       <AddressFromToIcon
@@ -103,8 +103,8 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
           noCopy={ current === to.hash }
           noIcon={ noIcon }
           tokenHash={ tokenHash }
-          truncation={ truncation }
-          maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
+          truncation="constant"
+          maxW={ `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
           ml={ 3 }
         />
       ) }

ui/shared/entities/base/components.tsx

@@ -13,7 +13,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
 
 import { getIconProps, type IconSize } from './utils';
 
-export type Truncation = 'constant' | 'dynamic' | 'tail' | 'none';
+export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'none';
 
 export interface EntityBaseProps {
   className?: string;
@@ -117,6 +117,14 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna
 
   const children = (() => {
     switch (truncation) {
+      case 'constant_long':
+        return (
+          <HashStringShorten
+            hash={ text }
+            as={ asProp }
+            type="long"
+          />
+        );
       case 'constant':
         return (
           <HashStringShorten

ui/shared/statusTag/StatusTag.tsx

@@ -37,9 +37,9 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
 
   return (
     <Tooltip label={ errorText }>
-      <Tag colorScheme={ colorScheme } display="inline-flex" isLoading={ isLoading }>
-        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 }/>
-        <TagLabel>{ text }</TagLabel>
+      <Tag colorScheme={ colorScheme } display="flex" isLoading={ isLoading } >
+        <IconSvg boxSize={ 2.5 } name={ icon } mr={ 2 } flexShrink={ 0 }/>
+        <TagLabel display="block">{ text }</TagLabel>
       </Tag>
     </Tooltip>
   );

ui/tokens/TokensTableItem.tsx

@@ -87,6 +87,7 @@ const TokensTableItem = ({
                 noIcon
                 fontSize="sm"
                 fontWeight={ 500 }
+                truncation="constant"
               />
               <AddressAddToWallet
                 token={ token }

ui/tx/state/TxStateListItem.tsx

@@ -24,6 +24,7 @@ const TxStateListItem = ({ data, isLoading }: Props) => {
         <AddressEntity
           address={ data.address }
           isLoading={ isLoading }
+          truncation="constant"
         />
         { tag }
       </ListItemMobileGrid.Value>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx

@@ -72,7 +72,7 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
               hash={ hash }
               fontSize="sm"
               lineHeight={ 5 }
-              maxW="100%"
+              truncation="constant_long"
             />
           )) }
         </VStack>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx

@@ -32,6 +32,7 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           fontSize="sm"
           lineHeight={ 5 }
           fontWeight={ 600 }
+          noIcon
         />
       </Td>
       <Td>
@@ -64,7 +65,8 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
               hash={ hash }
               fontSize="sm"
               lineHeight={ 5 }
-              maxW="100%"
+              truncation="constant_long"
+              noIcon
             />
           )) }
         </VStack>

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx

@@ -69,7 +69,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
             hash={ item.verify_tx_hash }
             fontSize="sm"
             lineHeight={ 5 }
-            maxW="100%"
+            truncation="constant_long"
           />
         ) : <Text>Pending</Text> }
       </ListItemMobileGrid.Value>
@@ -82,7 +82,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
             hash={ item.sequence_tx_hash }
             fontSize="sm"
             lineHeight={ 5 }
-            maxW="100%"
+            truncation="constant_long"
           />
         ) : <Text>Pending</Text> }
       </ListItemMobileGrid.Value>

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx

@@ -15,15 +15,15 @@ type Props = {
 
 const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm" minW="850px">
+    <Table variant="simple" size="sm" minW="1000px">
       <Thead top={ top }>
         <Tr>
-          <Th width="170px">Batch #</Th>
-          <Th width="150px">Status</Th>
+          <Th width="33%">Batch #</Th>
+          <Th width="33%">Status</Th>
           <Th width="150px">Age</Th>
-          <Th width="170px">Txn count</Th>
-          <Th width="50%">Verify Tx Has</Th>
-          <Th width="50%">Sequence hash</Th>
+          <Th width="150px">Txn count</Th>
+          <Th width="230px">Verify Tx Has</Th>
+          <Th width="230px">Sequence hash</Th>
         </Tr>
       </Thead>
       <Tbody>

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx

@@ -32,6 +32,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           fontSize="sm"
           lineHeight={ 5 }
           fontWeight={ 600 }
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle">
@@ -59,7 +60,8 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
             hash={ item.verify_tx_hash }
             fontSize="sm"
             lineHeight={ 5 }
-            maxW="100%"
+            truncation="constant_long"
+            noIcon
           />
         ) : <Text>Pending</Text> }
       </Td>
@@ -70,7 +72,8 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
             hash={ item.sequence_tx_hash }
             fontSize="sm"
             lineHeight={ 5 }
-            maxW="100%"
+            truncation="constant_long"
+            noIcon
           />
         ) : <Text>Pending</Text> }
       </Td>

ui/txs/TxsListItem.tsx

@@ -49,7 +49,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
         <TxEntity
           isLoading={ isLoading }
           hash={ tx.hash }
-          truncation="constant"
+          truncation="constant_long"
           fontWeight="700"
         />
         { tx.timestamp && (

ui/txs/TxsTableItem.tsx

@@ -55,6 +55,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             fontWeight={ 700 }
             noIcon
             maxW="100%"
+            truncation="constant"
           />
           { tx.timestamp && <Skeleton color="text_secondary" fontWeight="400" isLoaded={ !isLoading }><span>{ timeAgo }</span></Skeleton> }
         </VStack>

ui/userOps/UserOpsListItem.tsx

@@ -28,7 +28,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>User op hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon/>
+        <UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon truncation="constant_long"/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
@@ -48,6 +48,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
             <UserOpsAddress
               address={ item.address }
               isLoading={ isLoading }
+              truncation="constant"
             />
           </ListItemMobileGrid.Value>
         </>
@@ -61,6 +62,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
               hash={ item.transaction_hash }
               isLoading={ isLoading }
               noIcon
+              truncation="constant_long"
             />
           </ListItemMobileGrid.Value>
         </>

ui/userOps/UserOpsTable.tsx

@@ -18,7 +18,7 @@ import UserOpsTableItem from './UserOpsTableItem';
 
 const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table variant="simple" size="sm" minW="1000px">
       <Thead top={ top }>
         <Tr>
           <Th w="60%">User op hash</Th>

ui/userOps/UserOpsTableItem.tsx

@@ -25,7 +25,7 @@ const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 }/>
+        <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
       </Td>
       <Td verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>

ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx

@@ -64,6 +64,7 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
             <AddressEntity
               address={ item.receiver }
               isLoading={ isLoading }
+              truncation="constant"
             />
           </ListItemMobileGrid.Value>
         </>

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx

@@ -37,6 +37,7 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
             isLoading={ isLoading }
             fontSize="sm"
             lineHeight={ 5 }
+            noIcon
           />
         </Td>
       ) }

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx

@@ -40,6 +40,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
             <AddressEntity
               address={ item.from }
               isLoading={ isLoading }
+              truncation="constant"
             />
           </ListItemMobileGrid.Value>
         </>

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx

@@ -40,9 +40,10 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_tx_hash }
-          truncation="constant"
           fontSize="sm"
           lineHeight={ 5 }
+          truncation="constant_long"
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
@@ -61,7 +62,8 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
           <TxEntityL1
             isLoading={ isLoading }
             hash={ item.l1_tx_hash }
-            truncation="constant"
+            truncation="constant_long"
+            noIcon
             fontSize="sm"
             lineHeight={ 5 }
           />