Fix issue with Link Overlay in tBTC Explorer

[michalsmiarowski]

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 <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.

[github-actions]

Preview uploaded to https://preview.dashboard.test.threshold.network/fix-issue-with-link-overlay-in-tbtc-explorer/index.html.

[r-czajkowski]

Looks like it fixes an issue with links but now I can't scroll the table horizontally on mobile on FF and Safari.

[michalsmiarowski]

Looks like it fixes an issue with links but now I can't scroll the table horizontally on mobile on FF and Safari.

Hmmm, I've tested on Chrome and Safari using preview link and it works ok.

Chrome version: 114.0.5735.124 (You can check your by going into Chrome -> click three dots (...) in right-bottom corner -> Settings (in the top bar) -> Google Chrom)

Safari version: Probably 16.3 (Not sure how to check it, but I've for iOS 16.3.1 and it based on my really quick research if has Safari 16.3)

Here are videos showing that it works for me:

safari_scroll.MP4

chrome_scroll.MP4

Do you mind checking it again @r-czajkowski? And also let me know what versions of the browser did you use

[r-czajkowski]

Looks like it fixes an issue with links but now I can't scroll the table horizontally on mobile on FF and Safari.

Hmmm, I've tested on Chrome and Safari using preview link and it works ok.

Chrome version: 114.0.5735.124 (You can check your by going into Chrome -> click three dots (...) in right-bottom corner -> Settings (in the top bar) -> Google Chrom)

Safari version: Probably 16.3 (Not sure how to check it, but I've for iOS 16.3.1 and it based on my really quick research if has Safari 16.3)

Here are videos showing that it works for me:
safari_scroll.MP4
chrome_scroll.MP4

Do you mind checking it again @r-czajkowski? And also let me know what versions of the browser did you use

It doesn't work on mobile on Safari 15.5 and Firefox 113.0 (30633)

[michalsmiarowski]

@r-czajkowski Checked on firefox and it also works for me 🤔 Firefox version 115.1 (32781). Can you update firefox and safari and check again using preview link?

firefox_scroll.MOV