fix tables layout on small screens

ui/internalTxs/InternalTxsTable.tsx

@@ -17,13 +17,13 @@ interface Props {
 const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <TableRoot>
+      <TableRoot minW="900px">
         <TableHeaderSticky top={ 68 }>
           <TableRow>
-            <TableColumnHeader width="15%">Parent txn hash</TableColumnHeader>
+            <TableColumnHeader width="180px">Parent txn hash</TableColumnHeader>
             <TableColumnHeader width="15%">Type</TableColumnHeader>
-            <TableColumnHeader width="10%">Block</TableColumnHeader>
-            <TableColumnHeader width="40%">From/To</TableColumnHeader>
+            <TableColumnHeader width="15%">Block</TableColumnHeader>
+            <TableColumnHeader width="50%">From/To</TableColumnHeader>
             <TableColumnHeader width="20%" isNumeric>
               Value { currencyUnits.ether }
             </TableColumnHeader>

ui/internalTxs/InternalTxsTableItem.tsx

@@ -6,13 +6,13 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import { Badge } from 'toolkit/chakra/badge';
-import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean };
@@ -81,9 +81,13 @@ const InternalTxsTableItem = ({
         />
       </TableCell>
       <TableCell isNumeric verticalAlign="middle">
-        <Skeleton loading={ isLoading } display="inline-block" minW={ 6 }>
-          { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
-        </Skeleton>
+        <TruncatedValue
+          value={ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
+          isLoading={ isLoading }
+          minW={ 6 }
+          maxW="100%"
+          verticalAlign="middle"
+        />
       </TableCell>
     </TableRow>
   );

ui/tokens/TokensTableItem.tsx

@@ -14,6 +14,7 @@ import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = {
   token: TokenInfo;
@@ -104,14 +105,18 @@ const TokensTableItem = ({
         </Flex>
       </TableCell>
       <TableCell isNumeric>
-        <Skeleton loading={ isLoading } textStyle="sm" fontWeight={ 500 } display="inline-block">
-          { exchangeRate && `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` }
-        </Skeleton>
+        <TruncatedValue
+          value={ exchangeRate ? `$${ Number(exchangeRate).toLocaleString(undefined, { minimumSignificantDigits: 4 }) }` : '' }
+          isLoading={ isLoading }
+          maxW="100%"
+        />
       </TableCell>
       <TableCell isNumeric maxWidth="300px" width="300px">
-        <Skeleton loading={ isLoading } textStyle="sm" fontWeight={ 500 } display="inline-block">
-          { marketCap && `$${ BigNumber(marketCap).toFormat() }` }
-        </Skeleton>
+        <TruncatedValue
+          value={ marketCap ? `$${ BigNumber(marketCap).toFormat() }` : '' }
+          isLoading={ isLoading }
+          maxW="100%"
+        />
       </TableCell>
       <TableCell isNumeric>
         <Skeleton

ui/txs/TxsTableItem.tsx

@@ -101,7 +101,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       </TableCell>
       { !config.UI.views.tx.hiddenFields?.value && (
         <TableCell isNumeric>
-          <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
+          <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading } wordBreak="break-word"/>
         </TableCell>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
@@ -112,6 +112,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             isLoading={ isLoading }
             withCurrency={ Boolean(tx.celo || tx.stability_fee) }
             justifyContent="end"
+            wordBreak="break-word"
           />
         </TableCell>
       ) }

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -25,7 +25,7 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
   }, [ sort, setSorting ]);
 
   return (
-    <TableRoot>
+    <TableRoot minW="950px">
       <TableHeaderSticky top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <TableRow>
           <TableColumnHeader width="50%">Contract</TableColumnHeader>

ui/verifiedContracts/VerifiedContractsTableItem.tsx

@@ -64,7 +64,7 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
           value={ balance }
           isLoading={ isLoading }
           my={ 1 }
-          w="100%"
+          maxW="100%"
         />
       </TableCell>
       <TableCell isNumeric>