diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -9,17 +9,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   overflow: auto;
 }
 div.resizable-modal-overlay {
   min-height: 60px;
 }
-div.small-modal-overlay {
-  padding-top: 100px;
-}
-div.large-modal-overlay {
-  padding-top: 50px;
-}
 div.modal-container {
   background: var(--bg);
   background-size: 3000px 2000px;
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -40,12 +40,9 @@
       withCloseButton = false,
     } = this.props;
 
-    const overlayClasses = classNames(
-      css['modal-overlay'],
-      { [css['small-modal-overlay']]: size === 'small' },
-      { [css['large-modal-overlay']]: size === 'large' },
-      { [css['resizable-modal-overlay']]: !fixedHeight },
-    );
+    const overlayClasses = classNames(css['modal-overlay'], {
+      [css['resizable-modal-overlay']]: !fixedHeight,
+    });
     const modalContainerClasses = classNames(css['modal-container'], {
       [css['large-modal-container']]: size === 'large',
     });