Merge pull request #579 from blockscout/fixes-2

bug fixes

ui/pages/Transaction.tsx

@@ -48,7 +48,7 @@ const TransactionPageContent = () => {
     });
 
   const additionals = (
-    <Flex justifyContent="space-between" alignItems="center" flexGrow={ 1 }>
+    <Flex justifyContent="space-between" alignItems="center" flexGrow={ 1 } flexWrap="wrap">
       { data?.tx_tag && <Tag my={ 2 }>{ data.tx_tag }</Tag> }
       { explorersLinks.length > 0 && (
         <Flex

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -23,7 +23,7 @@ const TokenTransferTable = ({ data, top, token, showSocketInfo, socketInfoAlert,
     <Table variant="simple" size="sm">
       <Thead top={ top }>
         <Tr>
-          <Th width="40%">Txn hash</Th>
+          <Th width={ token.type === 'ERC-1155' ? '60%' : '80%' }>Txn hash</Th>
           <Th width="164px">Method</Th>
           <Th width="148px">From</Th>
           <Th width="36px" px={ 0 }/>

ui/token/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Tag, Text, Icon } from '@chakra-ui/react';
+import { Tr, Td, Tag, Text, Icon, Grid } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -35,10 +35,12 @@ const TokenTransferTableItem = ({
   return (
     <Tr alignItems="top">
       <Td>
-        <Address display="inline-flex" maxW="100%" fontWeight={ 600 } lineHeight="30px">
-          <AddressLink type="transaction" hash={ txHash }/>
-        </Address>
-        { timestamp && <Text color="gray.500" fontWeight="400" mt="10px">{ timeAgo }</Text> }
+        <Grid alignItems="center" gridTemplateColumns="auto 130px" width="fit-content">
+          <Address display="inline-flex" fontWeight={ 600 } lineHeight="30px">
+            <AddressLink type="transaction" hash={ txHash }/>
+          </Address>
+          { timestamp && <Text color="gray.500" fontWeight="400" ml="10px">{ timeAgo }</Text> }
+        </Grid>
       </Td>
       <Td>
         { method ? <Tag colorScheme="gray">{ method }</Tag> : '-' }