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 && ( + + ) }
- { title && ( - - ) } { children }
,