attempt to fix ios scroll locking bug

Author: codergautam

components/countrySelectorModal.js

@@ -72,19 +72,19 @@ export default function CountrySelectorModal({ shown, onClose, currentCountry, o
           boxShadow: 'none',
           maxWidth: '100%',
           width: 'auto',
-          overflow: 'visible'
+          overflow: 'hidden'
         },
         overlay: {
           background: 'rgba(0, 0, 0, 0.8)',
-          backdropFilter: 'blur(10px)',
-          overflow: 'auto'
+          backdropFilter: 'blur(10px)'
         }
       }}
     >
       <div className="join-party-card" style={{
         maxWidth: '600px',
         width: '90vw',
         maxHeight: '80vh',
+        overflow: 'hidden',
         display: 'flex',
         flexDirection: 'column',
         animation: 'slideInUp 0.6s ease-out'
@@ -111,12 +111,15 @@ export default function CountrySelectorModal({ shown, onClose, currentCountry, o
           overflowY: 'scroll',
           overflowX: 'hidden',
           WebkitOverflowScrolling: 'touch',
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(min(160px, 100%), 1fr))',
-          gap: '8px',
+          overscrollBehavior: 'contain',
           marginBottom: '15px',
           paddingRight: '5px'
         }}>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(min(160px, 100%), 1fr))',
+            gap: '8px',
+          }}>
           {filteredCountries.map(code => (
             <button
               key={code}
@@ -169,6 +172,7 @@ export default function CountrySelectorModal({ shown, onClose, currentCountry, o
               </span>
             </button>
           ))}
+          </div>
         </div>
 
         <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', flexShrink: 0 }}>