From 88eb9555c79f45d2df32c61c16321fe79783c51a Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Wed, 5 Aug 2020 09:49:33 -0600
Subject: [PATCH] [CORL-1227] Fix scroll-able modal position popping (#3069)

* Disable scrolling on site moderators modal

The site moderator modal already has a scroll bar
inside it and its height is less than 480px. We
don't need a scrollbar on the modal background since
the modal window will always be fully visible on
even the smallest screens.

This eliminates the bug of the modal sliding away
when there are enough sites in the org to cause the
background scroll to be activated.

CORL-1227

* Stop checkboxes from shoving input element down

The checkbox input element that we style away
using ::before css was being shoved down the
dom non-relative to the checkbox root.

Now it's relative to the checkbox root and positioned
accordingly.

CORL-1227

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../admin/components/UserRole/SiteModeratorModal.tsx |  2 +-
 .../client/ui/components/v2/CheckBox/CheckBox.css    |  2 ++
 src/core/client/ui/components/v2/Modal/Modal.css     | 12 ++++++++++--
 src/core/client/ui/components/v2/Modal/Modal.tsx     |  7 ++++++-
 .../v2/Modal/__snapshots__/Modal.spec.tsx.snap       |  2 +-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx b/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx
index 761bb770e..3b2500c70 100644
--- a/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx
+++ b/src/core/client/admin/components/UserRole/SiteModeratorModal.tsx
@@ -56,7 +56,7 @@ const SiteModeratorModal: FunctionComponent<Props> = ({
   );
 
   return (
-    <Modal open={open} onClose={onCancel}>
+    <Modal open={open} onClose={onCancel} disableScroll>
       {({ firstFocusableRef, lastFocusableRef }) => (
         <Card className={styles.root}>
           <Flex justifyContent="flex-end">
diff --git a/src/core/client/ui/components/v2/CheckBox/CheckBox.css b/src/core/client/ui/components/v2/CheckBox/CheckBox.css
index da0882248..193883a5b 100644
--- a/src/core/client/ui/components/v2/CheckBox/CheckBox.css
+++ b/src/core/client/ui/components/v2/CheckBox/CheckBox.css
@@ -1,10 +1,12 @@
 .root {
+  position: relative;
 }
 
 .input {
   cursor: pointer;
   position: absolute; /* take it out of document flow */
   opacity: 0; /* hide it */
+  top: 0;
 }
 
 .label {
diff --git a/src/core/client/ui/components/v2/Modal/Modal.css b/src/core/client/ui/components/v2/Modal/Modal.css
index 1c67b8304..be729a78f 100644
--- a/src/core/client/ui/components/v2/Modal/Modal.css
+++ b/src/core/client/ui/components/v2/Modal/Modal.css
@@ -8,14 +8,22 @@
   z-index: $zindex-modal;
 }
 
-.scroll {
+.baseScroll {
   pointer-events: none;
   position: relative;
-  overflow-y: auto;
+
   width: 100%;
   height: 100%;
 }
 
+.noScroll {
+  overflow-y: hidden;
+}
+
+.scroll {
+  overflow-y: auto;
+}
+
 .alignContainer1 {
   display: table;
   margin: 0 auto;
diff --git a/src/core/client/ui/components/v2/Modal/Modal.tsx b/src/core/client/ui/components/v2/Modal/Modal.tsx
index c5f72184d..ff6a5e311 100644
--- a/src/core/client/ui/components/v2/Modal/Modal.tsx
+++ b/src/core/client/ui/components/v2/Modal/Modal.tsx
@@ -59,6 +59,7 @@ export interface ModalProps {
   classes: typeof styles;
   open?: boolean;
   children?: PropTypesOf<typeof TrapFocus>["children"];
+  disableScroll?: boolean;
 }
 
 const Modal: FunctionComponent<ModalProps> = ({
@@ -69,6 +70,7 @@ const Modal: FunctionComponent<ModalProps> = ({
   onBackdropClick,
   onEscapeKeyDown,
   children,
+  disableScroll = false,
   ...rest
 }) => {
   const rootClassName = cn(classes.root, className);
@@ -110,7 +112,10 @@ const Modal: FunctionComponent<ModalProps> = ({
         />
         <div
           role="presentation"
-          className={styles.scroll}
+          className={cn(
+            styles.baseScroll,
+            disableScroll ? styles.noScroll : styles.scroll
+          )}
           onKeyDown={handleEscapeKeyDown}
         >
           <div className={styles.alignContainer1}>
diff --git a/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap b/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap
index 380445832..da80bd5f3 100644
--- a/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap
+++ b/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders correctly 1`] = `
     onClick={[Function]}
   />
   <div
-    className="Modal-scroll"
+    className="Modal-baseScroll Modal-scroll"
     onKeyDown={[Function]}
     role="presentation"
   >