From d3ace95ff6193e283a131d9b723a6e1a914e281c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 30 Mar 2021 10:41:36 +0200
Subject: [PATCH] Fixed PSM seo preview title overflowing bug

---
 ghost/admin/app/components/gh-post-settings-menu.hbs | 4 ++--
 ghost/admin/app/styles/components/settings-menu.css  | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index e927f0f4cf..1a32de2230 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -199,7 +199,7 @@
                                         @focus-out={{action "setMetaTitle" this.metaTitleScratch}}
                                         @stopEnterKeyDownPropagation={{true}}
                                         data-test-field="meta-title" />
-                                    <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.metaTitleScratch 70}}</p>
+                                    <p>Recommended: <b>60</b> characters. You’ve used {{gh-count-down-characters this.metaTitleScratch 60}}</p>
                                     <GhErrorMessage @errors={{this.post.errors}} @property="meta-title" />
                                 </GhFormGroup>
 
@@ -241,7 +241,7 @@
                                                 <div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
                                             </div>
                                             <div class="gh-seo-preview-link">{{this.config.blogDomain}} › {{#if this.ghostPaths.subdir}}{{this.ghostPaths.subdir}} › {{/if}}{{@post.slug}}</div>
-                                            <div class="gh-seo-preview-title">{{this.seoTitle}}</div>
+                                            <div class="gh-seo-preview-title">{{truncate this.seoTitle 60}}</div>
                                             <div class="gh-seo-preview-desc">{{this.seoDescription}}</div>
                                         </div>
                                     </div>
diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css
index 24400b814d..9fd31601e8 100644
--- a/ghost/admin/app/styles/components/settings-menu.css
+++ b/ghost/admin/app/styles/components/settings-menu.css
@@ -234,6 +234,10 @@
     line-height: 1.35em;
 }
 
+.settings-menu-content .gh-seo-preview-title {
+    white-space: inherit;
+}
+
 .settings-menu-content .CodeMirror {
     height: 170px;
     min-height: 170px;