lighteningcards 2.2.2 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighteningcards",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/LightningCardHTML.js

@@ -45,7 +45,7 @@ const LightningCardHTML = ({
 
   // Get device class - memoize to prevent unnecessary re-renders
   const [isDesktop, setIsDesktop] = useState(() => window.innerWidth >= 768);
-  
+
   useEffect(() => {
     const handleResize = () => {
       setIsDesktop(window.innerWidth >= 768);
@@ -53,7 +53,7 @@ const LightningCardHTML = ({
     window.addEventListener("resize", handleResize, { passive: true });
     return () => window.removeEventListener("resize", handleResize);
   }, []);
-  
+
   const deviceClass = isDesktop ? "desktop--36d4c" : "mobile--4607f";
 
   // Generate shell background SVG (from the HTML)
@@ -131,11 +131,11 @@ const LightningCardHTML = ({
         const { canvas } = animateThunderSprite(img, 3, 10, true, 0.25);
         if (canvas) {
           canvas.style.position = "absolute";
-          canvas.style.left = isDesktop
-            ? "calc(50% - 40px)"
-            : "calc(50% + 75px)";
+          canvas.style.left = isDesktop ? "calc(50% - 40px)" : "25%";
           canvas.style.top = "calc(50% + 15px)";
-          canvas.style.transform = "translate(-50%, -50%) scale(0.3)";
+          canvas.style.transform = isDesktop
+            ? "translate(-50%, -50%) scale(0.3)"
+            : "translate(-50%, -50%) scale(0.22)";
           canvas.style.zIndex = "1";
           thunderLeftRef.current.appendChild(canvas);
         }
@@ -152,11 +152,11 @@ const LightningCardHTML = ({
         const { canvas } = animateThunderSprite(img, 3, 10, true, 0.25);
         if (canvas) {
           canvas.style.position = "absolute";
-          canvas.style.right = isDesktop
-            ? "calc(50% - 40px)"
-            : "calc(50% - 75px)";
+          canvas.style.right = isDesktop ? "calc(50% - 40px)" : "25%";
           canvas.style.top = "calc(50% + 15px)";
-          canvas.style.transform = "translate(50%, -50%) scale(0.3)";
+          canvas.style.transform = isDesktop
+            ? "translate(50%, -50%) scale(0.3)"
+            : "translate(50%, -50%) scale(0.22)";
           canvas.style.zIndex = "1";
           thunderRightRef.current.appendChild(canvas);
         }
@@ -280,10 +280,10 @@ const LightningCardHTML = ({
         width: "100%",
         height: "100%",
         position: "relative",
-        overflow: "hidden",
+        overflow: isDesktop ? "hidden" : "visible",
       }}
     >
-      {/* Thunder animations - positioned absolutely */}
+      {/* Thunder animations - positioned absolutely; on mobile allow overflow so full thunder shows */}
       <div
         ref={thunderLeftRef}
         style={{
@@ -291,6 +291,7 @@ const LightningCardHTML = ({
           width: "100%",
           height: "100%",
           pointerEvents: "none",
+          overflow: "visible",
         }}
       ></div>
       <div
@@ -300,6 +301,7 @@ const LightningCardHTML = ({
           width: "100%",
           height: "100%",
           pointerEvents: "none",
+          overflow: "visible",
         }}
       ></div>
       <div
@@ -363,7 +365,7 @@ const LightningCardHTML = ({
                   {multiplier !== null && multiplier !== undefined && (
                     <div
                       className="multiplier--22733"
-                      style={ { fontSize: "15px" } }
+                      style={{ fontSize: "15px" }}
                     >
                       <div className="multiplier--fe086">
                         <span
@@ -475,7 +477,7 @@ const LightningCardHTML = ({
                     {multiplier !== null && multiplier !== undefined && (
                       <div
                         className="multiplier--22733"
-                        style={ { fontSize: "15px" } }
+                        style={{ fontSize: "15px" }}
                       >
                         <div className="multiplier--fe086">
                           <span