[CORL-684] Fix scrolling bug in overflowing modal (#2682)

* fix: scrolling bug in overflowing modal

* fix: tests

src/core/client/ui/components/Backdrop/Backdrop.css

@@ -1,6 +1,6 @@
 .root {
   display: none;
-  background: black;
+  background: rgba(0, 0, 0, 1.0);
   position: fixed;
   /* fix to bottom solves some mobile scrolling issues. */
   bottom: 0;
@@ -11,5 +11,5 @@
 
 .active {
   display: block;
-  opacity: 0.5;
+  background: rgba(0, 0, 0, 0.5);
 }

src/core/client/ui/components/Backdrop/Backdrop.tsx

@@ -18,7 +18,6 @@ const Backdrop: FunctionComponent<Props> = ({
   classes,
   active,
   className,
-  children,
   ...rest
 }) => {
   const rootClassName = cn(

src/core/client/ui/components/Modal/Modal.css

@@ -9,7 +9,6 @@
 }
 
 .scroll {
-  pointer-events: none;
   position: relative;
   overflow-y: auto;
   width: 100%;

src/core/client/ui/components/Modal/Modal.tsx

@@ -107,20 +107,21 @@ const Modal: FunctionComponent<Props> = ({
           active={open}
           data-testid="backdrop"
           onClick={handleBackdropClick}
-        />
-        <div
-          role="presentation"
-          className={styles.scroll}
-          onKeyDown={handleEscapeKeyDown}
         >
-          <div className={styles.alignContainer1}>
-            <div className={styles.alignContainer2}>
-              <div className={styles.wrapper}>
-                <TrapFocus>{children}</TrapFocus>
+          <div
+            role="presentation"
+            className={styles.scroll}
+            onKeyDown={handleEscapeKeyDown}
+          >
+            <div className={styles.alignContainer1}>
+              <div className={styles.alignContainer2}>
+                <div className={styles.wrapper}>
+                  <TrapFocus>{children}</TrapFocus>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </Backdrop>
       </div>,
       modalDOMNode
     );

src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap

@@ -9,35 +9,36 @@ exports[`renders correctly 1`] = `
     className="Backdrop-root Backdrop-active"
     data-testid="backdrop"
     onClick={[Function]}
-  />
-  <div
-    className="Modal-scroll"
-    onKeyDown={[Function]}
-    role="presentation"
   >
     <div
-      className="Modal-alignContainer1"
+      className="Modal-scroll"
+      onKeyDown={[Function]}
+      role="presentation"
     >
       <div
-        className="Modal-alignContainer2"
+        className="Modal-alignContainer1"
       >
         <div
-          className="Modal-wrapper"
+          className="Modal-alignContainer2"
         >
           <div
-            onFocus={[Function]}
-            tabIndex={0}
-          />
-          <div
-            tabIndex={-1}
-          />
-          <div>
-            Test
+            className="Modal-wrapper"
+          >
+            <div
+              onFocus={[Function]}
+              tabIndex={0}
+            />
+            <div
+              tabIndex={-1}
+            />
+            <div>
+              Test
+            </div>
+            <div
+              onFocus={[Function]}
+              tabIndex={0}
+            />
           </div>
-          <div
-            onFocus={[Function]}
-            tabIndex={0}
-          />
         </div>
       </div>
     </div>