From 5bb9bbb20befcccb5a900432feddb05c6b0bdf27 Mon Sep 17 00:00:00 2001 From: michalsmiarowski Date: Mon, 26 Jun 2023 08:57:33 +0200 Subject: [PATCH] Fix issue with Link Overlay in tBTC Explorer We encountered an issue with the 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 `` 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. --- src/pages/tBTC/Explorer/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/tBTC/Explorer/index.tsx b/src/pages/tBTC/Explorer/index.tsx index ba2c98fd2..493e766ab 100644 --- a/src/pages/tBTC/Explorer/index.tsx +++ b/src/pages/tBTC/Explorer/index.tsx @@ -157,6 +157,7 @@ const HistoryRow: FC = ({ txHash, address, amount, date }) => { key={`latest-mints-${txHash}`} _odd={{ backgroundColor: "gray.50" }} sx={{ td: { borderBottom: "none" } }} + transform="scale(1)" >