From eb9f458c67adbd10d47572144451087e35bf340d Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Mon, 12 Aug 2024 19:44:37 -0400
Subject: [PATCH] fix: now the back of the dev card no longer peers through
 when flipped on Safari and Firefox (#3931)

---
 components/molecules/DevCard/dev-card.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/molecules/DevCard/dev-card.tsx b/components/molecules/DevCard/dev-card.tsx
index 6d84164a8..d62b883d1 100644
--- a/components/molecules/DevCard/dev-card.tsx
+++ b/components/molecules/DevCard/dev-card.tsx
@@ -4,6 +4,7 @@ import Tilt from "react-parallax-tilt";
 import { FiGlobe } from "react-icons/fi";
 import { PiCrownSimpleFill } from "react-icons/pi";
 import { HiArrowNarrowRight, HiTrendingDown, HiTrendingUp } from "react-icons/hi";
+import clsx from "clsx";
 import Button from "components/shared/Button/button";
 import openSaucedImg from "img/openSauced-icon.png";
 import { getRelativeDays } from "lib/utils/date-utils";
@@ -61,7 +62,7 @@ export default function DevCard(props: DevCardProps) {
 
   return (
     <div
-      className="DevCard"
+      className="DevCard select-none"
       style={{
         width: "245px",
         height: "348px",
@@ -102,7 +103,12 @@ export default function DevCard(props: DevCardProps) {
             height={348}
           />
 
-          <div className="z-10 flex flex-col gap-2 items-center justify-center w-full h-full text-white">
+          <div
+            className={clsx(
+              "z-10 flex flex-col gap-2 items-center justify-center w-full h-full text-white",
+              isFlipped && "invisible"
+            )}
+          >
             {/** Avatar + @Username **/}
             <div className="flex flex-col items-center gap-1">
               <Image