Mobile display issue with card tooltip

[crookedneighbor]

Reported via Discord https://discord.com/channels/673601282946236417/728339448558911508/831447457036107786

Describe the Problem

When clicking/hovering over a card to display the card. The cursor/touch position is (potentially) used to determine where the top left corner of the card display starts. This sometimes causes the card to partially be cut off.

Browser and Operating System Information

Test Environment:
Phone: Pixel 3, Android 11, Build/RQ2A.210305.006
Browser: Chrome, Version 89.0.4389.105

Though I expect any touch oriented device will have this happen.

Steps to Reproduce

I was on page https://commanderspellbook.com/combo/8625/
When clicking/hovering on "Capture of Jingzhou". If your cursor/touch position was at the start of the card name; you get image 1. If it was instead towards the end of the name; you get image 2.

[crookedneighbor]

The solution here may just to not do the card tooltip on browsers that support touch events.

[crookedneighbor]

Suggestion from Arthur on Discord:

Hey @blade on mobile can you make single tap of a card load the image in a tooltip and double click go to scryfall? Right now it always goes to scryfall

[roya0045]

Suggestion from Arthur on Discord:

Hey @blade on mobile can you make single tap of a card load the image in a tooltip and double click go to scryfall? Right now it always goes to scryfall

I agree with this feature request.

There doesn't seem to be a mobile-specific format, just a 'not wide format'. An option would be to have a box that expand when clicking the link and then clicking the image would lead to scryfall. As hover is not a thing on touchscreen.

Having something expand or just showing the stacked card would be more similar to the wide ui where the image lead to the external website.