entry details will better fit in to split view

frontend/src/components/SteamEntryDetails.js

@@ -36,17 +36,16 @@ const SteamEntryDetails = () => {
       >
         <HStack id="EntryHeader" width="100%" m={0}>
           <Heading
-            overflow="hidden"
             width={entry?.context_url ? "calc(100% - 28px)" : "100%"}
             minH="36px"
             style={{ marginLeft: "0" }}
             m={0}
             p={0}
             fontWeight="600"
-            fontSize="1.5rem"
+            fontSize="md"
             textAlign="left"
           >
-            {entry && entry.tx.hash}
+            {entry && `Hash: ${entry.tx.hash}`}
           </Heading>
         </HStack>
       </Skeleton>

frontend/src/components/TxInfo.js

@@ -58,25 +58,29 @@ const TxInfo = (props) => {
   return (
     <Box boxShadow="xs" p="6" rounded="md">
       <StatGroup>
-        <Stat>
+        <Stat px={2}>
           <StatLabel>Value</StatLabel>
-          <StatNumber>{toEth(transaction.tx.value)} eth</StatNumber>
+          <StatNumber fontSize="md">
+            {toEth(transaction.tx.value)} eth
+          </StatNumber>
           <StatHelpText>amount of ETH to transfer</StatHelpText>
         </Stat>
         <Stat>
           <StatLabel>Gas limit</StatLabel>
-          <StatNumber>{transaction.tx.gas}</StatNumber>
+          <StatNumber fontSize="md">{transaction.tx.gas}</StatNumber>
           <StatHelpText>Maximum amount of gas </StatHelpText>
           <StatHelpText>provided for the transaction</StatHelpText>
         </Stat>
         <Stat>
           <StatLabel>Gas price</StatLabel>
-          <StatNumber>{toEth(transaction.tx.gasPrice)} eth</StatNumber>
+          <StatNumber fontSize="md">
+            {toEth(transaction.tx.gasPrice)} eth
+          </StatNumber>
           <StatHelpText>the fee the sender pays per unit of gas</StatHelpText>
         </Stat>
       </StatGroup>
 
-      <Table variant="simple">
+      <Table variant="simple" size="sm">
         <Tbody>
           {Object.keys(transaction.tx)
             .filter(dont_display)
@@ -85,7 +89,7 @@ const TxInfo = (props) => {
                 transaction.tx[key] != undefined && (
                   <Tr key={key}>
                     <Td>{key}</Td>
-                    <Td>{transaction.tx[key]}</Td>
+                    <Td wordBreak="break-all">{transaction.tx[key]}</Td>
                   </Tr>
                 )
             )}