Fix fullScreen prop on derived Modal

Author: kraenhansen

packages/compass-components/src/components/modals/modal.tsx

@@ -5,7 +5,7 @@ import { Body, Modal as LeafyGreenModal } from '../leafygreen';
 import { useScrollbars } from '../../hooks/use-scrollbars';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
-const contentStyles = css({
+const styles = css({
   width: '600px',
   letterSpacing: 0,
   padding: 0,
@@ -15,22 +15,9 @@ const contentStyles = css({
   transform: 'none',
 });
 
-const modalFullScreenStyles = css({
-  '& > div': {
-    paddingTop: spacing[600],
-    paddingBottom: spacing[600],
-    paddingLeft: spacing[800],
-    paddingRight: spacing[800],
-    height: '100vh',
-    maxHeight: '100vh',
-  },
-});
-
-const contentFullScreenStyles = css({
+const fullScreenStyles = css({
   width: '100%',
   height: '100%',
-  maxHeight: '100%',
-  margin: 0,
   alignSelf: 'stretch',
   '& > div': {
     height: '100%',
@@ -56,16 +43,10 @@ function UnwrappedModal({
 
   return (
     <LeafyGreenModal
-      backdropClassName={cx(
-        scrollbarStyles,
-        fullScreen && modalFullScreenStyles,
-        backdropClassName
-      )}
-      className={cx(
-        contentStyles,
-        fullScreen && contentFullScreenStyles,
-        className
-      )}
+      backdropClassName={cx(scrollbarStyles, backdropClassName)}
+      className={cx(styles, className, {
+        [fullScreenStyles]: fullScreen,
+      })}
       {...props}
     >
       {/* Rendering conditionally on `open` as a workaround for LG-5601 */}