From 76e073228f43568b3fd1f80b7d476d8e0d1e9fdf Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Wed, 26 Nov 2025 22:52:29 +0100
Subject: [PATCH] fix(challenge-modal): improve mobile iframe challenge modal
 positioning and sizing

---
 .../challenge-modal/challenge-modal.module.css    | 15 +++++++++++++--
 .../challenge-modal/challenge-modal.tsx           | 11 ++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/challenge-modal/challenge-modal.module.css b/src/components/challenge-modal/challenge-modal.module.css
index 1a320356..5da748c9 100644
--- a/src/components/challenge-modal/challenge-modal.module.css
+++ b/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;
   }
 }
\ No newline at end of file
diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx
index b826e8ed..d104fb61 100644
--- a/src/components/challenge-modal/challenge-modal.tsx
+++ b/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',
       }}
     >