From a49f71f717efb2db37841e230eefccd92e94719c Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Mon, 27 Jun 2022 15:46:32 +0500
Subject: [PATCH] fix: post editor images and preview images responsiveness
 (#206)

---
 src/components/PostPreviewPane.jsx | 2 +-
 src/components/TinyMCEEditor.jsx   | 2 +-
 src/index.scss                     | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/PostPreviewPane.jsx b/src/components/PostPreviewPane.jsx
index 2590afdd..a51b1083 100644
--- a/src/components/PostPreviewPane.jsx
+++ b/src/components/PostPreviewPane.jsx
@@ -16,7 +16,7 @@ function PostPreviewPane({
   return (
     <>
       {showPreviewPane && (
-        <div className={`p-2 bg-light-200 rounded shadow-sm ${isPost ? 'mt-3 mb-5.5' : 'my-3'}`} style={{ maxHeight: '200px', overflow: 'scroll' }}>
+        <div className={`p-2 bg-light-200 rounded shadow-sm post-preview ${isPost ? 'mt-3 mb-5.5' : 'my-3'}`} style={{ maxHeight: '200px', overflow: 'scroll' }}>
           <Close onClick={() => setShowPreviewPane(false)} className="float-right text-primary-500 mb" />
           <HTMLLoader htmlNode={htmlNode} />
         </div>
diff --git a/src/components/TinyMCEEditor.jsx b/src/components/TinyMCEEditor.jsx
index 89981368..e4dc653b 100644
--- a/src/components/TinyMCEEditor.jsx
+++ b/src/components/TinyMCEEditor.jsx
@@ -96,7 +96,7 @@ export default function TinyMCEEditor(props) {
           + ' | charmap',
         content_css: false,
         content_style: contentStyle,
-        body_class: 'm-2',
+        body_class: 'm-2 text-editor',
         default_link_target: '_blank',
         target_list: false,
         images_upload_handler: uploadHandler,
diff --git a/src/index.scss b/src/index.scss
index 8588946d..1efe1dd6 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -9,7 +9,9 @@ $fa-font-path: "~font-awesome/fonts";
 #post,
 #comment,
 #reply,
-.discussion-comments {
+.discussion-comments,
+.text-editor,
+.post-preview {
   img {
     height: auto;
     max-width: 100%;