From 4ddfd3b3c6da42507724f889fb2cb393c4674881 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 8 Feb 2021 13:14:46 +0100
Subject: [PATCH] Updated browser and email mockup in post-preview

---
 .../components/modal-post-preview/email.hbs   |  4 +-
 .../admin/app/styles/layouts/post-preview.css | 44 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-preview/email.hbs b/ghost/admin/app/components/modal-post-preview/email.hbs
index b48bec4577..4e85d28e5c 100644
--- a/ghost/admin/app/components/modal-post-preview/email.hbs
+++ b/ghost/admin/app/components/modal-post-preview/email.hbs
@@ -1,5 +1,5 @@
-<div class="modal-body modal-preview-email-content gh-pe-desktop-container h-auto overflow-auto">
-    <div class="gh-pe-emailclient-mockup">
+<div class="gh-post-preview-email-container">
+    <div class="gh-post-preview-email-mockup">
         <div class="gh-pe-emailclient-sender">
             <p>
                 <span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
diff --git a/ghost/admin/app/styles/layouts/post-preview.css b/ghost/admin/app/styles/layouts/post-preview.css
index d6f36537b6..8c32809f24 100644
--- a/ghost/admin/app/styles/layouts/post-preview.css
+++ b/ghost/admin/app/styles/layouts/post-preview.css
@@ -61,7 +61,7 @@
     flex-grow: 1;
     overflow: auto;
     margin: 0;
-    padding: 48px;
+    padding: 48px 48px 0;
     background: var(--whitegrey-l1);
 }
 
@@ -77,7 +77,8 @@
     width: 100%;
     max-width: 1320px;
     padding: 0;
-    border-radius: 12px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
     background: var(--white);
     box-shadow:
         0 0 0 1px rgba(0,0,0,0.02),
@@ -152,6 +153,45 @@
 }
 
 
+/* Email preview */
+.gh-post-preview-email-container {
+    position: relative;
+    height: calc(100vh - 135px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--whitegrey-l1);
+    padding: 30px 30px 0;
+    overflow: auto;
+}
+
+.gh-post-preview-email-mockup {
+    flex-grow: 1;
+    overflow: hidden;
+    max-width: 740px;
+    width: 100%;
+    padding: 0;
+    background: var(--white);
+    box-shadow:
+        0 0 0 1px rgba(0,0,0,0.02),
+        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+        0 12.5px 10px rgba(0, 0, 0, 0.035),
+        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+        0 100px 80px rgba(0, 0, 0, 0.07);
+    ;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.gh-post-preview-email-container iframe {
+    border: none;
+    width: 100%;
+    height: calc(100% - 67px);
+}
+
+
 /* Social preview */
 .gh-post-preview-social-container {
     position: relative;