Indicate if a dialog is scrollable

We had broken paging in the infinite scroll component. Turning off "scrolling" at the dialog levels fixes it without adding scrollbars in environments that persistently show them

components/common/DialogContent/index.scss

@@ -59,8 +59,12 @@
       width: 100%;
     }
 
-    .Scrollable {
-      overflow-y: auto;
+    .Container {
+      overflow-y: hidden;
+
+      &.Scrollable {
+        overflow-y: auto;
+      }
     }
 
     .DialogHeader {

components/common/DialogContent/index.tsx

@@ -13,12 +13,13 @@ interface Props
   > {
   headerref?: React.RefObject<HTMLDivElement>
   footerref?: React.RefObject<HTMLDivElement>
+  scrollable?: boolean
   onEscapeKeyDown: (event: KeyboardEvent) => void
   onOpenAutoFocus: (event: Event) => void
 }
 
 const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
-  { children, ...props },
+  { scrollable, children, ...props },
   forwardedRef
 ) {
   // Classes
@@ -131,7 +132,13 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
           onEscapeKeyDown={props.onEscapeKeyDown}
           ref={forwardedRef}
         >
-          <div className="Scrollable" onScroll={handleScroll}>
+          <div
+            className={classNames({
+              Container: true,
+              Scrollable: scrollable,
+            })}
+            onScroll={handleScroll}
+          >
             {children}
           </div>
         </DialogPrimitive.Content>
@@ -141,4 +148,8 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
   )
 })
 
+DialogContent.defaultProps = {
+  scrollable: true,
+}
+
 export default DialogContent