Correcting sizing styles more

Author: kraenhansen

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

@@ -5,6 +5,10 @@ import { Body, Modal as LeafyGreenModal } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
 const styles = css({
+  // Force the width and height and margins to never extend the containing element
+  maxHeight: `calc(100% - 2 * ${spacing['600']}px)`,
+  maxWidth: `calc(100% - 2 * ${spacing['800']}px)`,
+
   letterSpacing: 0,
   padding: 0,
   // The LG modal applies transform: translate3d(0, 0, 0) style to the modal
@@ -17,12 +21,8 @@ const styles = css({
 });
 
 const fullScreenStyles = css({
-  top: spacing['600'],
-  bottom: spacing['600'],
-  left: spacing['800'],
-  right: spacing['800'],
   height: 'auto',
-  width: 'auto',
+  width: '100%',
   '& > div': {
     height: '100%',
     maxHeight: '100%',
@@ -39,9 +39,13 @@ function UnwrappedModal({
 }): React.ReactElement {
   return (
     <LeafyGreenModal
-      className={cx(styles, className, {
-        [fullScreenStyles]: fullScreen && props.open,
-      })}
+      className={cx(
+        styles,
+        {
+          [fullScreenStyles]: fullScreen && props.open,
+        },
+        className
+      )}
       /* For now, we're defaulting to not auto-focus the first focusable element */
       initialFocus={null}
       {...props}

packages/connection-form/src/components/connection-form-modal.tsx

@@ -6,7 +6,6 @@ import ConnectionForm from './connection-form';
 
 const styles = css({
   width: '960px',
-  maxWidth: '960px',
 });
 
 export default function ConnectionFormModal({