fix(challenge-modal): improve mobile iframe challenge modal positioning and sizing

Author: plebe1us

src/components/challenge-modal/challenge-modal.module.css

@@ -145,8 +145,19 @@
     cursor: default;
   }
 
+  .iframeContainer {
+    width: calc(100% - 10px);
+    max-width: calc(100% - 15px);
+  }
+
   .iframeWrapper {
-    width: 100vw;
-    height: 70vh;
+    width: 100%;
+    height: 500px;
+    margin: 5px 0;
+  }
+
+  .iframe {
+    border-left: none;
+    border-right: none;
   }
 }

src/components/challenge-modal/challenge-modal.tsx

@@ -216,8 +216,10 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
     return null;
   }
 
+  const isIframeVisible = isIframeChallenge && !showIframeConfirmation;
+
   const containerClasses = [styles.container];
-  if (isIframeChallenge) {
+  if (isIframeVisible) {
     containerClasses.push(styles.iframeContainer);
   }
 
@@ -246,13 +248,16 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
     }
   })();
 
+  const mobileX = isIframeVisible ? 5 : window.innerWidth / 2 - 150;
+  const mobileY = isIframeVisible ? Math.max(10, (window.innerHeight - 600) / 2) : window.innerHeight / 2 - 200;
+
   return (
     <animated.div
       className={containerClasses.join(' ')}
       ref={nodeRef}
       style={{
-        x: isMobile ? window.innerWidth / 2 - 150 : x,
-        y: isMobile ? window.innerHeight / 2 - 200 : y,
+        x: isMobile ? mobileX : x,
+        y: isMobile ? mobileY : y,
         touchAction: 'none',
       }}
     >