more design fixes

ui/pages/Transaction.tsx

@@ -37,12 +37,22 @@ const TransactionPageContent = ({ tab }: Props) => {
         <Icon as={ eastArrowIcon } boxSize={ 6 } mr={ 2 } transform="rotate(180deg)"/>
         Transactions
       </Link>
+      <Flex alignItems="flex-start" flexDir={{ base: 'column', lg: 'row' }}>
         <PageTitle text="Transaction details"/>
-      <Flex marginLeft="auto" alignItems="center" flexWrap="wrap" columnGap={ 6 } rowGap={ 3 } mb={ 6 }>
+        <Flex
+          alignItems="center"
+          flexWrap="wrap"
+          columnGap={ 6 }
+          rowGap={ 3 }
+          ml={{ base: 'initial', lg: 'auto' }}
+          mb={{ base: 6, lg: 'initial' }}
+          py={ 2.5 }
+        >
           <ExternalLink title="Open in Tenderly" href="#"/>
           <ExternalLink title="Open in Blockchair" href="#"/>
           <ExternalLink title="Open in Etherscan" href="#"/>
         </Flex>
+      </Flex>
       <RoutedTabs
         tabs={ TABS }
         defaultActiveTab={ tab }

ui/tx/TxDetails.tsx

@@ -204,7 +204,7 @@ const TxDetails = () => {
             <Box>
               <Text as="span" fontWeight="500">Txn type: </Text>
               <Text fontWeight="600" as="span">{ tx.type.value }</Text>
-              <Text fontWeight="400" as="span" ml={ 1 }>({ tx.type.eip })</Text>
+              <Text fontWeight="400" as="span" ml={ 1 } variant="secondary">({ tx.type.eip })</Text>
               <TextSeparator/>
             </Box>
             <Box>