From 97940742cfd9fde702bf2d70dc168e8574375cfd Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 3 Dec 2019 14:51:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Scaled=20email=20mobile=20previe?=
 =?UTF-8?q?w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue.

- scaled email mobile preview to resemble mobile proportions better
---
 .../app/styles/layouts/preview-email.css      | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/preview-email.css b/ghost/admin/app/styles/layouts/preview-email.css
index d1f86f1736..24a419edca 100644
--- a/ghost/admin/app/styles/layouts/preview-email.css
+++ b/ghost/admin/app/styles/layouts/preview-email.css
@@ -5,29 +5,25 @@
 
 .fullscreen-modal-email-preview .modal-content {
     position: relative;
-    padding-bottom: 0;
     overflow: scroll;
     height: 100%;
+    padding: 0;
 }
 
 .fullscreen-modal-email-preview .modal-body {
-    height: 100%;
-    margin: 0 -32px;
-}
-
-.modal-preview-email-content {
-    height: calc(100vh - 170px);
+    margin: 0;
 }
 
 .gh-pe-header {
     position: sticky;
-    top: -32px;
-    left: -32px;
-    right: -32px;
+    top: 0;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: -32px -32px 0;
+    margin: 0;
+    padding: 18px 32px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     overflow: hidden;
@@ -35,7 +31,6 @@
     background-repeat: no-repeat;
     background-size: cover;
     background: var(--white);
-    padding: 18px 32px;
     z-index: 9999;
 }
 
@@ -84,8 +79,10 @@
 }
 
 .fullscreen-modal-email-preview .gh-pe-mobile-container {
-    height: 702px;
-    padding-bottom: 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px 0;
 }
 
 .fullscreen-modal-email-preview .gh-pe-desktop-container {
@@ -93,7 +90,8 @@
 }
 
 .gh-pe-mobile-bezel {
-    width: 346px;
+    width: 320px;
+    height: 657px;
     border: 1px solid var(--midgrey-l2);
     border-radius: 40px;
     display: flex;
@@ -109,10 +107,12 @@
 }
 
 .gh-pe-mobile-container .gh-pe-iframe {
-    height: 100%;
-    width: 318px;
-    overflow-x: hidden;
     padding: 0;
+    transform: scale(0.8);
+    transform-origin: 0 0;
+    overflow-x: hidden;
+    width: 365px;
+    height: 786px;
 }
 
 .gh-pe-mobile-container .gh-pe-iframe .left-col {