fix: post editor images and preview images responsiveness (#206)

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>

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,

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%;