From 9ffb05f9222c972b09bbb7036a03f45ec3ad2784 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:35:52 +0100
Subject: [PATCH] Fixed excerpt display in post history modal (#21847)

REF
https://linear.app/ghost/issue/DES-1026/visual-bug-with-excerpt-in-post-history-modal
- The excerpt was not in line with the rest of the content.
- The excerpt divider was visible even when there was no excerpt.
---
 ghost/admin/app/components/modal-post-history.hbs |  4 +++-
 ghost/admin/app/styles/layouts/post-history.css   | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/modal-post-history.hbs b/ghost/admin/app/components/modal-post-history.hbs
index f7f8ab1261..af933c5879 100644
--- a/ghost/admin/app/components/modal-post-history.hbs
+++ b/ghost/admin/app/components/modal-post-history.hbs
@@ -27,7 +27,9 @@
                     <div class="gh-editor-excerpt" data-test-post-history-preview-excerpt>
                         {{this.selectedRevision.custom_excerpt}}
                     </div>
-                    <hr class="gh-editor-title-divider">
+                    {{#if this.selectedRevision.custom_excerpt}}
+                        <hr class="gh-editor-title-divider">
+                    {{/if}}
                 {{/if}}
                 <KoenigLexicalEditor
                     @lexical={{this.selectedRevision.lexical}}
diff --git a/ghost/admin/app/styles/layouts/post-history.css b/ghost/admin/app/styles/layouts/post-history.css
index 45e5c94453..43acfb59d0 100644
--- a/ghost/admin/app/styles/layouts/post-history.css
+++ b/ghost/admin/app/styles/layouts/post-history.css
@@ -196,6 +196,19 @@
     color: var(--black);
 }
 
+.gh-post-history .gh-editor-excerpt {
+    max-width: 740px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.gh-post-history .gh-editor-title-divider {
+    width: 100%;
+    max-width: 740px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .gh-post-history-hidden-lexical {
     display: none;
 }