fix(mobile-image-tap): resolves issue #513

src/components/combo/CardGroup/CardGroup.tsx

@@ -1,5 +1,5 @@
 import styles from './cardGroup.module.scss';
-import React, { useState } from 'react';
+import React from 'react';
 
 import CardImage from '../../layout/CardImage/CardImage';
 import TemplateCard from 'components/combo/TemplateCard/TemplateCard';
@@ -11,38 +11,19 @@ type Props = {
 };
 
 const CardGroup: React.FC<Props> = ({ cards, templates }) => {
-  const [hoveredOverCardIndex, setHoveredOverCardIndex] = useState(-1);
-
-  const shouldExpand = (index: number): boolean => {
-    if (hoveredOverCardIndex < 0) {
-      return false;
-    }
-    return index - 4 === hoveredOverCardIndex || index - 8 === hoveredOverCardIndex;
-  };
-
   return (
     <div className={`${styles.cardImages} container hidden lg:flex ${cards.length < 4 && 'justify-center'}`}>
       {(cards as (CardInVariant | TemplateInVariant)[])
         .concat(templates)
         .flatMap((c) => Array<CardInVariant | TemplateInVariant>(c.quantity).fill(c))
         .map((card, index) => (
-          <div
-            key={`oracle-card-image-${index}`}
-            className={`${styles.cardImgWrapper} ${shouldExpand(index) && styles.expand}`}
-            onMouseEnter={() => setHoveredOverCardIndex(index)}
-            onMouseLeave={() => setHoveredOverCardIndex(-1)}
-            style={{
-              zIndex: hoveredOverCardIndex === index ? 10 : 1, // Bring hovered card to the front
-              transition: 'z-index 0.2s',
-            }}
-          >
-            {'template' in card && <TemplateCard className={styles.cardImg} template={card} />}
+          <div key={`oracle-card-image-${index}`} className={styles.cardImgWrapper}>
+            {'template' in card && <TemplateCard template={card} />}
             {'card' in card && (
               <div>
                 <CardImage
                   img={`https://api.scryfall.com/cards/named?format=image&face=front&version=normal&exact=${encodeURIComponent(card.card.name)}`}
                   name={card.card.name}
-                  className={styles.cardImg}
                 />
               </div>
             )}

src/components/combo/CardGroup/cardGroup.module.scss

@@ -2,16 +2,14 @@
   @apply relative flex-wrap -mt-20 mb-4;
 }
 
-.cardImages .cardImgWrapper .cardImg {
-  @apply rounded-xl relative top-0 transition-all duration-500 ease-in-out;
-}
-
-.cardImages .cardImgWrapper.expand .cardImg {
-  top: 310px;
+.cardImages .cardImgWrapper {
+  @apply relative w-1/4 p-1 flex-shrink rounded-xl top-0 transition-all duration-500 ease-in-out;
 }
 
-.cardImages .cardImgWrapper {
-  @apply relative w-1/4 p-1 flex-shrink rounded-xl;
+@for $i from 1 through 4 {
+  .cardImages .cardImgWrapper:nth-child(4n + #{$i}):hover ~ .cardImgWrapper:nth-child(4n + #{$i}) {
+    top: 310px;
+  }
 }
 
 .cardImages .cardImgWrapper:nth-child(1n + 5) {

src/components/layout/CardLink/CardLink.tsx

@@ -21,8 +21,25 @@ const CardLink: React.FC<Props> = ({ name, children, className }: Props) => {
     link = `https://scryfall.com/search?q=%21${quotes}${encodeURIComponent(name)}${quotes}`;
   }
 
+  // prevent single click on mobile
+  const handleSingleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (window.innerWidth <= 1024) {
+      event.preventDefault();
+    }
+  };
+
+  // allow double click on mobile
+  const handleDoubleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (window.innerWidth <= 1024) {
+      window.open(link, '_blank', 'noopener,noreferrer');
+    } else {
+      //Do nothing
+      event.preventDefault();
+    }
+  };
+
   return (
-    <ExternalLink className={className} href={link}>
+    <ExternalLink className={className} href={link} onClick={handleSingleClick} onDoubleClick={handleDoubleClick}>
       {children}
     </ExternalLink>
   );

src/components/layout/CardTooltip/CardTooltip.tsx

@@ -17,6 +17,17 @@ const CardTooltip: React.FC<Props> = ({ cardName, children }) => {
   const [isImageLoaded, setIsImageLoaded] = useState(cardNames.map((_, i) => i == 0));
   const loadedImages = isImageLoaded.filter((val) => val).length;
 
+  const handleSingleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (window.innerWidth <= 1024) {
+      if (!divRef.current) {
+        return;
+      }
+      divRef.current.style.display = 'flex';
+    } else {
+      event.preventDefault();
+    }
+  };
+
   const handleMouseMove = (e: any) => {
     if (!divRef.current) {
       return;
@@ -39,7 +50,7 @@ const CardTooltip: React.FC<Props> = ({ cardName, children }) => {
   };
 
   return (
-    <span onMouseMove={handleMouseMove} onMouseOut={handleMouseOut}>
+    <span onMouseMove={handleMouseMove} onMouseOut={handleMouseOut} onClick={handleSingleClick}>
       <div ref={divRef} className={styles.cardTooltip}>
         {urls.map((url, index) => (
           <img