adapt details tab to mobile

ui/pages/Transaction.tsx

@@ -37,9 +37,10 @@ const TransactionPageContent = ({ tab }: Props) => {
         Transactions
       </Link>
       <PageHeader text="Transaction details"/>
-      <Flex marginLeft="auto" alignItems="center" columnGap={ 6 } mb={ 6 }>
-        <ExternalLink title="Open in Tenderly" href="#"/>
+      <Flex marginLeft="auto" alignItems="center" flexWrap="wrap" columnGap={ 6 } rowGap={ 3 } mb={ 6 }>
         <ExternalLink title="Open in Tenderly" href="#"/>
+        <ExternalLink title="Open in Blockchair" href="#"/>
+        <ExternalLink title="Open in Etherscan" href="#"/>
       </Flex>
       <RoutedTabs
         tabs={ TABS }

ui/shared/DetailsInfoItem.tsx

@@ -13,7 +13,7 @@ interface Props extends HTMLChakraProps<'div'> {
 const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
   return (
     <>
-      <GridItem py={ 2 } lineHeight={ 5 } { ...styles } whiteSpace="nowrap">
+      <GridItem py={{ base: 1, lg: 2 }} lineHeight={ 5 } { ...styles } whiteSpace="nowrap" _notFirst={{ mt: { base: 3, lg: 0 } }}>
         <Flex columnGap={ 2 } alignItems="center">
           <Tooltip
             label={ hint }
@@ -24,10 +24,20 @@ const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
               <Icon as={ infoIcon } boxSize={ 5 }/>
             </Box>
           </Tooltip>
-          <Text fontWeight={ 500 }>{ title }</Text>
+          <Text fontWeight={{ base: 700, lg: 500 }}>{ title }</Text>
         </Flex>
       </GridItem>
-      <GridItem display="flex" alignItems="center" flexWrap="wrap" rowGap={ 3 } py={ 2 } lineHeight={ 5 } whiteSpace="nowrap" { ...styles }>
+      <GridItem
+        display="flex"
+        alignItems="center"
+        flexWrap="wrap"
+        rowGap={ 3 }
+        pl={{ base: 7, lg: 0 }}
+        py={{ base: 1, lg: 2 }}
+        lineHeight={ 5 }
+        whiteSpace="nowrap"
+        { ...styles }
+      >
         { children }
       </GridItem>
     </>

ui/tx/TxDetails.tsx

@@ -41,7 +41,7 @@ const TxDetails = () => {
   }, []);
 
   return (
-    <Grid columnGap={ 8 } rowGap={ 3 } templateColumns="auto minmax(0, 1fr)">
+    <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
       <DetailsInfoItem
         title="Transaction hash"
         hint="Unique character string (TxID) assigned to every verified transaction."
@@ -79,10 +79,10 @@ const TxDetails = () => {
           Confirmed within { tx.confirmation_duration } secs
         </Text>
       </DetailsInfoItem>
+      <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem
         title="From"
         hint="Address (external or contract) sending the transaction."
-        mt={ 8 }
       >
         <Address>
           <AddressIcon hash={ tx.address_from }/>
@@ -112,10 +112,10 @@ const TxDetails = () => {
           { tx.transferred_tokens.map((item) => <TokenTransfer key={ item.token } { ...item }/>) }
         </Flex>
       </DetailsInfoItem>
+      <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
       <DetailsInfoItem
         title="Value"
         hint="Value sent in the native token (and USD) if applicable."
-        mt={ 8 }
       >
         <Text>{ tx.amount.value } Ether</Text>
         <Text variant="secondary" ml={ 1 }>(${ tx.amount.value_usd.toFixed(2) })</Text>
@@ -131,8 +131,8 @@ const TxDetails = () => {
         title="Gas price"
         hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
       >
-        <Text>{ tx.gas_price.toLocaleString('en', { minimumFractionDigits: 18 }) } Ether</Text>
-        <Text variant="secondary" ml={ 1 }>({ (tx.gas_price * Math.pow(10, 18)).toFixed(0) } Gwei)</Text>
+        <Text mr={ 1 }>{ tx.gas_price.toLocaleString('en', { minimumFractionDigits: 18 }) } Ether</Text>
+        <Text variant="secondary">({ (tx.gas_price * Math.pow(10, 18)).toFixed(0) } Gwei)</Text>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas limit & usage by txn"
@@ -165,10 +165,10 @@ const TxDetails = () => {
         hint="Amount of ETH burned for this transaction. Equals Block Base Fee per Gas * Gas Used."
       >
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 }>{ tx.burnt_fees.value.toLocaleString('en', { minimumFractionDigits: 18 }) } Ether</Text>
-        <Text variant="secondary" ml={ 1 }>(${ tx.burnt_fees.value_usd.toFixed(2) })</Text>
+        <Text ml={ 1 } mr={ 1 }>{ tx.burnt_fees.value.toLocaleString('en', { minimumFractionDigits: 18 }) } Ether</Text>
+        <Text variant="secondary">(${ tx.burnt_fees.value_usd.toFixed(2) })</Text>
       </DetailsInfoItem>
-      <GridItem colSpan={ 2 }>
+      <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Element name="TxDetails__cutLink">
           <Link
             mt={ 6 }
@@ -211,7 +211,7 @@ const TxDetails = () => {
           </DetailsInfoItem>
           <DetailsInfoItem
             title="Decoded input data"
-            hint="hmmmmmmmmmmm"
+            hint="Decoded input data"
           >
             <TxDecodedInputData/>
           </DetailsInfoItem>