From a792d152da7f14f6d24e2e38c2e87f80ec5202bd Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Fri, 12 Feb 2021 16:13:42 +0100
Subject: [PATCH] Fixed twitter preview shrinking bug and responsive issues for
 social preview

---
 .../components/modal-post-preview/social.hbs  |  6 +--
 .../admin/app/styles/layouts/post-preview.css | 44 ++++++++++++++++---
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-preview/social.hbs b/ghost/admin/app/components/modal-post-preview/social.hbs
index 990f788a87..3cc427ebad 100644
--- a/ghost/admin/app/components/modal-post-preview/social.hbs
+++ b/ghost/admin/app/components/modal-post-preview/social.hbs
@@ -1,7 +1,7 @@
 
 <div class="gh-post-preview-social-container">
     <div class="flex flex-column">
-        <div class="flex mb6">
+        <div class="flex gh-social-container-responsive">
             <div class="gh-social-og-container">
                 <div class="flex ma3 mb2">
                     <span>{{svg-jar "social-facebook" class="social-icon"}}</span>
@@ -36,7 +36,7 @@
             </div>
 
             <div class="gh-social-twitter-container">
-                <div class="flex ma3 mb2 mr4">
+                <div class="flex ma4">
                     <span>{{svg-jar "social-twitter" class="social-icon"}}</span>
                     <div>
                         <span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
@@ -49,7 +49,7 @@
                             {{#if this.twitterImage}}
                                 <div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
                             {{/if}}
-                            <div class="gh-twitter-preview-content">
+                            <div class="gh-social-twitter-preview-content">
                                 <div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
                                 <div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
                                 <div class="gh-social-twitter-preview-meta">
diff --git a/ghost/admin/app/styles/layouts/post-preview.css b/ghost/admin/app/styles/layouts/post-preview.css
index c14e3e889e..5f7d0be569 100644
--- a/ghost/admin/app/styles/layouts/post-preview.css
+++ b/ghost/admin/app/styles/layouts/post-preview.css
@@ -186,7 +186,9 @@
 .gh-post-preview-social-container {
     position: relative;
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
+    width: 100%;
     height: 100%;
     overflow-y: scroll;
     padding: 3.2rem;
@@ -196,6 +198,20 @@
     border-bottom-right-radius: 3px;
 }
 
+.gh-post-preview-social-container:after {
+    content: "";
+    display: block;
+    height: 2.4rem;
+    width: 100%;
+  }
+
+@media (max-width: 1120px) {
+    .gh-social-container-responsive {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
 .social-icon {
     width: 40px;
     height: 40px;
@@ -204,12 +220,18 @@
 
 .gh-social-og-container {
     width: 476px;
-    margin-right: 1.2rem;
+    margin-bottom: 2.4rem;
     border: 1px solid #e5e5e5;
     background: #fff;
     border-radius: 3px;
 }
 
+@media (min-width: 1120px) {
+    .gh-social-og-container {
+        margin-right: 1.2rem;
+    }
+}
+
 .gh-social-og-title {
     color: #385898;
     font-size: 14;
@@ -313,12 +335,18 @@
 }
 
 .gh-social-twitter-container {
-    width: 600px;
-    margin-left: 1.2rem;
+    width: 591px;
+    margin-bottom: 2.4rem;
     border: 1px solid #ebeef0;
     background: #fff;
 }
 
+@media (min-width: 1120px) {
+    .gh-social-twitter-container {
+        margin-left: 1.2rem;
+    }
+}
+
 .gh-social-twitter-post-preview {
     overflow: hidden;
     color: #292f33;
@@ -338,8 +366,12 @@
     background-position: center center;
 }
 
+.gh-social-twitter-preview-content {
+    padding: 10px;
+}
+
 .gh-social-twitter-preview-title {
-    max-width: 487px;
+    width: 487px;
     max-height: 1.3em;
     overflow: hidden;
     overflow-wrap: break-word;
@@ -353,6 +385,7 @@
 }
 
 .gh-social-twitter-preview-desc {
+    width: 487px;
     max-height: 40px;
     overflow: hidden;
     overflow-wrap: break-word;
@@ -369,6 +402,7 @@
     display: flex;
     overflow: hidden;
     overflow-wrap: break-word;
+    width: 487px;
     margin-top: 2px;
     color: #5b7083;
     font-size: 15px;
@@ -406,7 +440,7 @@
 .gh-seo-preview-container {
     display: flex;
     width: 100%;
-    max-width: 1108px;
+    max-width: 1091px;
     padding: 20px 30px;
     border: 1px solid var(--whitegrey);
     font-family: Arial, sans-serif;