From 03b8715276b5960f1a9889d1101256f391a6aee8 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 15 Mar 2023 10:12:20 +0100
Subject: [PATCH] Added support for center-aligning comments link in email
 preview

Refs https://github.com/TryGhost/Team/issues/2714

- When center-aligning the post title, the meta data and comments link are also centered
---
 .../app/components/modals/newsletters/edit/preview-labs.hbs | 4 ++--
 ghost/admin/app/styles/layouts/members.css                  | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
index d125e525e9..a191c0c43f 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
@@ -28,9 +28,9 @@
             {{#if @newsletter.showPostTitleSection}}
                 <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
                     <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
-                    <div class="flex justify-between w-100">
+                    <div class="flex justify-between w-100 {{if (eq @newsletter.titleAlignment "center") "flex-column"}}">
                         <p>By {{or this.session.user.name this.session.user.email}} on {{moment-format (moment-site-tz) "D MMM YYYY"}}</p>
-                        <div>
+                        <div class="{{if (eq @newsletter.titleAlignment "center") "gh-members-emailpreview-meta-center"}}">
                             <a href="javascript:">View in browser</a>
                             {{!-- {{#if newsletter.showCommentCta}} --}}
                                 <a href="javascript:"> {{svg-jar "comments"}}</a>
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 41a9b74b53..35435679aa 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -2068,6 +2068,10 @@ p.gh-members-import-errordetail:first-of-type {
     color: #15212A;
 }
 
+.gh-members-emailpreview-meta-center {
+    text-align: center;
+}
+
 .gh-members-emailpreview-labs .gh-members-emailpreview-title p {
     padding: 0 0 4px;
     color: var(--midgrey);
@@ -2092,7 +2096,7 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-members-emailpreview-labs .gh-members-emailpreview-title a svg {
     display: inline-block;
-    margin: -2px 0 0 12px;
+    margin: -2px 0 0 10px;
     vertical-align: middle;
     width: 16px;
     height: 16px;