Skip to content

Commit

Permalink
Fix issue with Link Overlay in tBTC Explorer
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
michalsmiarowski authored and r-czajkowski committed Jul 27, 2023
1 parent 2a26f76 commit 898a688
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions src/pages/tBTC/Explorer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 898a688

Please sign in to comment.