diff --git a/ghost/admin/app/components/modal-post-preview/social.hbs b/ghost/admin/app/components/modal-post-preview/social.hbs
index 3c34fc24f7..a19720bc3c 100644
--- a/ghost/admin/app/components/modal-post-preview/social.hbs
+++ b/ghost/admin/app/components/modal-post-preview/social.hbs
@@ -64,24 +64,24 @@
                         <div class="gh-social-og-preview-meta">
                             {{this.config.blogDomain}}
                         </div>
-                        <div class="gh-social-og-preview-title editable">
-                            {{#if this.editingFacebookTitle}}
-                                <input
-                                    type="text"
-                                    class="gh-input"
-                                    value={{@post.ogTitle}}
-                                    maxlength="300"
-                                    title="Facebook title"
-                                    {{on "blur" this.setFacebookTitle}}
-                                    {{on-key "Enter" this.blurElement}}
-                                    {{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
-                                    {{autofocus}}
-                                    data-prevent-escape-close-modal="true"
-                                />
-                            {{else}}
+                        {{#if this.editingFacebookTitle}}
+                            <input
+                                type="text"
+                                class="gh-input"
+                                value={{@post.ogTitle}}
+                                maxlength="300"
+                                title="Facebook title"
+                                {{on "blur" this.setFacebookTitle}}
+                                {{on-key "Enter" this.blurElement}}
+                                {{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
+                                {{autofocus}}
+                                data-prevent-escape-close-modal="true"
+                            />
+                        {{else}}
+                            <div class="gh-social-og-preview-title editable">
                                 <span class="pointer" {{on "click" this.editFacebookTitle}}>{{truncate this.facebookTitle 88}}</span>
-                            {{/if}}
-                        </div>
+                            </div>
+                        {{/if}}
                         {{#if this.editingFacebookDescription}}
                             <textarea
                                 class="gh-input"
@@ -94,7 +94,7 @@
                                 data-prevent-escape-close-modal="true"
                             >{{@post.ogDescription}}</textarea>
                         {{else}}
-                            <div class="gh-social-og-preview-desc">
+                            <div class="gh-social-og-preview-desc editable">
                                 <span class="pointer" {{on "click" this.editFacebookDescription}}>{{truncate this.facebookDescription}}</span>
                             </div>
                         {{/if}}
@@ -214,40 +214,40 @@
             <div class="gh-seo-preview">
                 <div class="gh-seo-search-bar mb12">{{svg-jar "google-search"}}</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 editable">
-                    {{#if this.editingMetaTitle}}
-                        <input
-                            type="text"
-                            class="gh-input"
-                            value={{@post.metaTitle}}
-                            maxlength="300"
-                            title="Meta title"
-                            {{on "blur" this.setMetaTitle}}
-                            {{on-key "Enter" this.blurElement}}
-                            {{on-key "Escape" (fn this.cancelEdit "metaTitle")}}
-                            {{autofocus}}
-                            data-prevent-escape-close-modal="true"
-                        >
-                    {{else}}
+                {{#if this.editingMetaTitle}}
+                    <input
+                        type="text"
+                        class="gh-input"
+                        value={{@post.metaTitle}}
+                        maxlength="300"
+                        title="Meta title"
+                        {{on "blur" this.setMetaTitle}}
+                        {{on-key "Enter" this.blurElement}}
+                        {{on-key "Escape" (fn this.cancelEdit "metaTitle")}}
+                        {{autofocus}}
+                        data-prevent-escape-close-modal="true"
+                    >
+                {{else}}
+                    <div class="gh-seo-preview-title editable">
                         <span class="pointer" {{on "click" this.editMetaTitle}}>{{this.serpTitle}}</span>
-                    {{/if}}
-                </div>
-                <div class="gh-seo-preview-desc editable">
-                    {{#if this.editingMetaDescription}}
-                        <textarea
-                            class="gh-input"
-                            maxlength="500"
-                            title="Meta description"
-                            {{on "blur" this.setMetaDescription}}
-                            {{on-key "Enter" this.blurElement}}
-                            {{on-key "Escape" (fn this.cancelEdit "metaDescription")}}
-                            {{autofocus}}
-                            data-prevent-escape-close-modal="true"
-                        >{{@post.metaDescription}}</textarea>
-                    {{else}}
+                    </div>
+                {{/if}}
+                {{#if this.editingMetaDescription}}
+                    <textarea
+                        class="gh-input"
+                        maxlength="500"
+                        title="Meta description"
+                        {{on "blur" this.setMetaDescription}}
+                        {{on-key "Enter" this.blurElement}}
+                        {{on-key "Escape" (fn this.cancelEdit "metaDescription")}}
+                        {{autofocus}}
+                        data-prevent-escape-close-modal="true"
+                    >{{@post.metaDescription}}</textarea>
+                {{else}}
+                    <div class="gh-seo-preview-desc editable">
                         <span class="pointer" {{on "click" this.editMetaDescription}}>{{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 170}}</span>
-                    {{/if}}
-                </div>
+                    </div>
+                {{/if}}
             </div>
         </div>
     </div>
diff --git a/ghost/admin/app/styles/layouts/post-preview.css b/ghost/admin/app/styles/layouts/post-preview.css
index cf11f5a659..8d08e343e4 100644
--- a/ghost/admin/app/styles/layouts/post-preview.css
+++ b/ghost/admin/app/styles/layouts/post-preview.css
@@ -305,14 +305,15 @@
 }
 
 .gh-social-og-preview-title.editable:hover {
-    margin: 2px -1px -1px -1px;
+    margin: 2px -1px -1px -4px;
+    padding-left: 3px;
     border: 1px solid var(--lightgrey-l1);
     background: var(--white);
     border-radius: 3px;
 }
 
 .gh-social-og-preview-title .gh-input {
-    margin-top: -2px !important;
+    margin: -2px 0 0 -3px !important;
 }
 
 .gh-social-og-preview-desc {
@@ -330,7 +331,8 @@
 
 .gh-social-og-preview-desc.editable:hover {
     max-height: 24px;
-    margin: 2px 0 -3px -1px;
+    margin: 2px 0 -3px -4px;
+    padding: 0 0 2px 3px;
     padding-bottom: 2px;
     border: 1px solid var(--lightgrey-l1);
     background: var(--white);
@@ -418,8 +420,8 @@
 
 .gh-social-twitter-preview-title.editable:hover {
     max-height: 25px;
-    margin: -2px 0 -3px -2px;
-    padding: 1px 0 4px 1px;
+    margin: -2px 0 -3px -5px;
+    padding: 1px 0 4px 4px;
     border: 1px solid var(--lightgrey);
     background: var(--white);
     border-radius: 3px;
@@ -441,8 +443,8 @@
 
 .gh-social-twitter-preview-desc.editable:hover {
     max-height: 42px;
-    margin: 4px 0 -1px -2px;
-    padding: 0 0 1px 1px;
+    margin: 4px 0 -1px -5px;
+    padding: 0 0 1px 4px;
     border: 1px solid var(--lightgrey);
     background: var(--white);
     border-radius: 3px;
@@ -585,8 +587,8 @@
 }
 
 .gh-seo-preview-title.editable:hover {
-    margin: 0 0 2px -1px;
-    padding: 3px 0 0;
+    margin: 0 0 2px -6px;
+    padding: 3px 0 0 5px;
     background: var(--white);
     border: 1px solid var(--lightgrey);
     border-radius: 3px;
@@ -609,13 +611,13 @@
 
 .gh-seo-preview-desc.editable:hover {
     max-height: 47px;
-    margin: -1px 0 -2px -1px;
-    padding-bottom: 2px;
+    margin: -1px 0 -2px -6px;
+    padding: 0 0 2px 5px;
     background: var(--white);
     border: 1px solid var(--lightgrey);
     border-radius: 3px;
 }
 
-.gh-seo-preview-desc .gh-input {
+.gh-seo-preview .gh-input {
     max-width: 100%;
 }
\ No newline at end of file