diff --git a/assets/css/src/components/_modal.scss b/assets/css/src/components/_modal.scss
index 1e09d7f1a3..e300d7bef5 100644
--- a/assets/css/src/components/_modal.scss
+++ b/assets/css/src/components/_modal.scss
@@ -25,8 +25,9 @@
border-radius: 4px;
box-shadow: $modal-shadow-modal;
box-sizing: border-box;
+ display: flex;
+ flex-flow: column;
height: 100%;
- overflow: auto;
width: 100%;
// Centered on desktops
@@ -37,7 +38,7 @@
animation-duration: 100ms;
animation-fill-mode: forwards;
height: auto;
- max-height: calc(100% - #{ $modal-header-height } - #{ $modal-header-height });
+ max-height: calc(100% - #{ $modal-grid-size-large } - #{ $modal-grid-size-large });
max-width: calc(100% - #{ $modal-grid-size-large } - #{ $modal-grid-size-large });
min-width: $modal-min-width;
width: auto;
@@ -54,36 +55,12 @@
}
}
-// Fix header to the top so it is always there to provide context to the modal
-// if the content needs to be scrolled (for example, on the keyboard shortcuts
-// modal screen).
.mailpoet-modal-header {
- align-items: center;
background: white;
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- height: $modal-header-height;
- justify-content: space-between;
- margin: 0 -#{$modal-grid-size-xlarge} $modal-grid-size-xlarge;
padding: 0 $modal-grid-size-xlarge;
- // For z-index to take effect, the element must be positioned. A "sticky"
- // element is positioned, but since this is not supported in IE11,
- // "relative" is used as a fallback.
- position: relative;
- position: sticky;
top: 0;
z-index: $modal-header-z-index;
- // Rules inside this query are only run by Microsoft Edge.
- // Edge has bugs around position: sticky;, so it needs a separate top rule.
- // See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.
-
- @supports (-ms-ime-align:auto) {
- position: fixed;
- width: 100%;
- }
-
.mailpoet-modal-close {
background: none;
border: 0;
@@ -118,14 +95,8 @@
.mailpoet-modal-content {
box-sizing: border-box;
height: 100%;
+ overflow: auto;
padding: 0 $modal-grid-size-xlarge $modal-grid-size-xlarge;
-
- // Rules inside this query are only run by Microsoft Edge.
- // This is a companion top padding to the fixed rule in line 77.
-
- @supports (-ms-ime-align:auto) {
- padding-top: $modal-header-height;
- }
}
.mailpoet-modal-full-screen {
diff --git a/assets/css/src/settings/_modal.scss b/assets/css/src/settings/_modal.scss
index f9b4e94ca1..562beb0821 100644
--- a/assets/css/src/settings/_modal.scss
+++ b/assets/css/src/settings/_modal.scss
@@ -1,6 +1,5 @@
$modal-border-width: 1px;
$modal-dark-gray-900: #191e23;
-$modal-header-height: 56px;
$modal-header-z-index: 10;
$modal-light-gray-500: #e2e4e7;
$modal-min-width: 360px;
diff --git a/assets/js/src/common/modal/modal.jsx b/assets/js/src/common/modal/modal.jsx
index b152754c5b..6fb94a77b1 100644
--- a/assets/js/src/common/modal/modal.jsx
+++ b/assets/js/src/common/modal/modal.jsx
@@ -27,17 +27,17 @@ function Modal({
overlayClassName={overlayClassName}
fullScreen={fullScreen}
>
+ { title && (
+