Refined mobile email preview

no refs.
Issue was that the ratio of email mobile preview UI was completely off on higher screen resolutions.

- set the email mobile preview UI to fixed size

ghost/admin/app/styles/layouts/preview-email.css

@@ -4,8 +4,9 @@
 }
 
 .fullscreen-modal-email-preview .modal-content {
+    position: relative;
     padding-bottom: 0;
-    overflow: hidden;
+    overflow: scroll;
     height: 100%;
 }
 
@@ -19,7 +20,10 @@
 }
 
 .gh-pe-header {
-    position: relative;
+    position: sticky;
+    top: -32px;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -32,6 +36,7 @@
     background-size: cover;
     background: var(--white);
     padding: 18px 32px;
+    z-index: 9999;
 }
 
 .gh-pe-header h2 {
@@ -79,8 +84,8 @@
 }
 
 .fullscreen-modal-email-preview .gh-pe-mobile-container {
-    height: calc(100% - 64px);
-    max-height: 812px;
+    height: 702px;
+    padding-bottom: 32px;
 }
 
 .fullscreen-modal-email-preview .gh-pe-desktop-container {
@@ -88,8 +93,7 @@
 }
 
 .gh-pe-mobile-bezel {
-    width: 100%;
-    max-width: 43vh;
+    width: 346px;
     border: 1px solid var(--midgrey-l2);
     border-radius: 40px;
     display: flex;
@@ -97,16 +101,16 @@
 
 .gh-pe-mobile-screen {
     width: 100%;
-    margin: 18px;
+    margin: 12px;
     border: 1px solid var(--midgrey-l2);
-    border-radius: 23px;
+    border-radius: 28px;
     flex-grow: 1;
     overflow: hidden;
 }
 
 .gh-pe-mobile-container .gh-pe-iframe {
     height: 100%;
-    width: calc(43vh - 40px);
+    width: 318px;
     overflow-x: hidden;
     padding: 0;
 }

ghost/admin/app/templates/components/modal-post-email-preview.hbs

@@ -12,7 +12,7 @@
 </header>
 
 {{#if (eq type "mobile")}}
-    <div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;padding-top: 12px;">
+    <div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;">
         <div class="gh-pe-mobile-bezel">
             <div class="gh-pe-mobile-screen">
                 <iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}}></iframe>