From 07628be22b0a77e7af7e59dc70e824b239335381 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 12 May 2022 14:43:16 +0100
Subject: [PATCH] Fixed alignment of preview modes in editor

Refs https://github.com/TryGhost/Team/issues/1621
---
 .../app/components/editor-labs/modals/preview.hbs   |  4 ++--
 ghost/admin/app/styles/layouts/post-preview.css     | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/components/editor-labs/modals/preview.hbs b/ghost/admin/app/components/editor-labs/modals/preview.hbs
index 66d510cd72..0e40b24802 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview.hbs
@@ -1,6 +1,6 @@
 <div class="flex flex-column h-100">
     <header class="modal-header gh-post-preview-header" data-test-modal="preview-email">
-        <div>
+        <div class="left">
             <button class="gh-editor-back-button" title="Close" type="button" {{on "click" @close}}>
                 <span>{{svg-jar "arrow-left"}} Editor</span>
             </button>
@@ -17,7 +17,7 @@
                 <button type="button" class="gh-btn {{if (eq this.tab "social") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changeTab "social")}}><span>{{svg-jar "twitter"}}</span></button>
             </div>
         </div>
-        <div class="flex">
+        <div class="right">
             <button
                 type="button"
                 class="gh-btn gh-editor-preview-trigger active"
diff --git a/ghost/admin/app/styles/layouts/post-preview.css b/ghost/admin/app/styles/layouts/post-preview.css
index 4144ab3897..7d0c633a6d 100644
--- a/ghost/admin/app/styles/layouts/post-preview.css
+++ b/ghost/admin/app/styles/layouts/post-preview.css
@@ -14,16 +14,15 @@
     background: var(--white);
 }
 
-.gh-post-preview-header h2 {
-    flex: 1;
-    margin: 0;
-    margin-right: auto;
+.gh-post-preview-header .left {
+    position: absolute;
+    left: 0;
 }
 
-.gh-post-preview-btn-group {
+.gh-post-preview-header .right {
+    position: absolute;
+    right: 0;
     display: flex;
-    flex-grow: 1;
-    justify-content: center;
 }
 
 .gh-post-preview-btn-group .gh-btn-group {