[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>

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">

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 {

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;

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}>

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"
   >