Fix overflowing modals not being scrollable on iOS (#40725)

app/javascript/mastodon/components/modal_root.jsx

@@ -59,6 +59,13 @@ class ModalRoot extends PureComponent {
     }
   };
 
+  handleBackgroundClick = (e) => {
+    // Close modal, but only when clicking outside of the modal's content
+    if (!e.target.matches('.modal-root__container *')) {
+      this.props.onClose();
+    }
+  }
+
   componentDidMount () {
     window.addEventListener('keydown', this.handleKeyDown, false);
     this.history = this.props.history || createBrowserHistory();
@@ -137,7 +144,7 @@ class ModalRoot extends PureComponent {
   };
 
   render () {
-    const { children, onClose } = this.props;
+    const { children } = this.props;
     const visible = !!children;
 
     if (!visible) {
@@ -156,9 +163,10 @@ class ModalRoot extends PureComponent {
     }
 
     return (
-      <div className='modal-root' ref={this.setRef}>
-        <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
-          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor }} />
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div className='modal-root' ref={this.setRef} onClick={this.handleBackgroundClick}>
+        <div>
+          <div className='modal-root__overlay' style={{ backgroundColor }} />
           <div role='dialog' className='modal-root__container'>{children}</div>
         </div>
       </div>

app/javascript/styles/mastodon/components.scss

@@ -6095,8 +6095,6 @@ a.status-card {
   box-sizing: border-box;
   display: flex;
   z-index: 9999;
-  pointer-events: none;
-  user-select: none;
   overscroll-behavior: none;
   overflow-y: auto;
 
@@ -6111,8 +6109,6 @@ a.status-card {
 }
 
 .modal-root__modal {
-  pointer-events: auto;
-  user-select: text;
   display: flex;
   max-width: 100vw;