fixed match modal centering on iphone

prevented body scroll when modal shows

viewport units and mobile responsive fixes
overflow hidden on body/html when match popup active
mobile media queries for smaller screens

terry davis would be proud of this viewport handling

script.js

@@ -254,12 +254,18 @@ function showMatchPopup() {
             rightProfileImg.src = bricks[currentIndex].image;
         }
         matchPopup.classList.add('show');
+        // Prevent body scrolling
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
     }
 }
 
 function hideMatchPopup() {
     if (matchPopup) {
         matchPopup.classList.remove('show');
+        // Restore body scrolling
+        document.body.style.overflow = '';
+        document.documentElement.style.overflow = '';
     }
 }
 

styles.css

@@ -12,6 +12,11 @@ body {
     justify-content: center;
     align-items: center;
     padding: 20px;
+    overflow-x: hidden;
+}
+
+html {
+    overflow-x: hidden;
 }
 
 .app-container {
@@ -288,8 +293,9 @@ header h1 {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
-    height: 100%;
+    height: 100vh;
+    min-height: 100vh;
     background: rgba(0, 0, 0, 0.7);
     display: none;
     justify-content: center;
@@ -297,6 +303,10 @@ header h1 {
     z-index: 1000;
     transition: opacity 0.3s ease;
     opacity: 0;
+    padding: 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
 }
 
 .match-popup.show {
@@ -312,6 +322,10 @@ header h1 {
     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
     animation: scaleIn 0.3s ease, scaleOut 0.3s ease 1.7s;
     max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+    margin: auto;
+    position: relative;
 }
 
 @keyframes scaleIn {
@@ -390,6 +404,37 @@ header h1 {
     color: #666;
 }
 
+/* Mobile fixes for match popup */
+@media screen and (max-width: 480px) {
+    .match-popup {
+        padding: 10px;
+    }
+    
+    .match-content {
+        padding: 30px 20px;
+        max-width: calc(100% - 20px);
+    }
+    
+    .match-content h2 {
+        font-size: 1.5em;
+        margin-bottom: 20px;
+    }
+    
+    .match-profiles {
+        gap: 15px;
+        margin-bottom: 20px;
+    }
+    
+    .profile-picture {
+        width: 100px;
+        height: 100px;
+    }
+    
+    .match-content p {
+        font-size: 1em;
+    }
+}
+
 .end-screen h2 {
     font-size: 2em;
     color: #333;