Merge pull request #556 from threshold-network/fix-issue-with-link-ov…

…erlay-in-tbtc-explorer

Fix issue with Link Overlay in tBTC Explorer

We encountered an issue with the <LinkOverlay> component from chakra-ui while
using it in the History table on the tBTC Explorer page. This component was
intended to facilitate navigation for each row, directing the user to the
corresponding etherscan link. However, we noticed an abnormal behavior
specifically on real mobile devices, even though it worked correctly in the
mobile view on Chrome.

On mobile, the overlay for the last item appeared to cover the entire page. As
a result, any other links on the tBTC Explorer page, such as "View on Dune
Analytics" or "Start Minting," unintentionally redirected the user to
etherscan.

The cause of this was that the `LinkBox` component uses `position: relative` to
contain the absolute positioned `LinkOverlay`.  Unfortunately `<Tr />`
component, which we passed to the `as property, does not allow `position:
relative`.

As a hacky workaround we are applying `transform: scale(1)` to the tr element.
See chakra-ui/chakra-ui#3832 for more info.

To test it out run `yarn start` as usual and then go to the link from `On Your
Network:` on your mobile device. I've tested it out using Chrome nad Safari on
iPhone and it seems to work as expected now.

src/pages/tBTC/Explorer/index.tsx

@@ -157,6 +157,7 @@ const HistoryRow: FC<RecentDeposit> = ({ txHash, address, amount, date }) => {
       key={`latest-mints-${txHash}`}
       _odd={{ backgroundColor: "gray.50" }}
       sx={{ td: { borderBottom: "none" } }}
+      transform="scale(1)"
     >
       <Td paddingLeft={12}>
         <BodyXs>