From 3be40852eb89652033e57820192dc6b3cdfe694d Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Mon, 25 Apr 2022 15:12:51 +0500
Subject: [PATCH] fix: make the post, comment, response content images
 responsive (#147)

---
 src/discussions/comments/comment/Comment.jsx | 2 +-
 src/discussions/comments/comment/Reply.jsx   | 2 +-
 src/discussions/posts/post/Post.jsx          | 2 +-
 src/index.scss                               | 8 ++++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/discussions/comments/comment/Comment.jsx b/src/discussions/comments/comment/Comment.jsx
index 7a96cb40..7d1d36a7 100644
--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -74,7 +74,7 @@ function Comment({
             <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} />
           )
           // eslint-disable-next-line react/no-danger
-          : <div className="comment-body px-2" dangerouslySetInnerHTML={{ __html: comment.renderedBody }} />}
+          : <div className="comment-body px-2" id="comment" dangerouslySetInnerHTML={{ __html: comment.renderedBody }} />}
         <CommentIcons
           comment={comment}
           following={comment.following}
diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx
index 3507482d..cbfeca7b 100644
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/src/discussions/comments/comment/Reply.jsx
@@ -78,7 +78,7 @@ function Reply({
           {isEditing
             ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
             // eslint-disable-next-line react/no-danger
-            : <div dangerouslySetInnerHTML={{ __html: reply.renderedBody }} />}
+            : <div id="reply" dangerouslySetInnerHTML={{ __html: reply.renderedBody }} />}
         </div>
       </div>
       <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index 709b4f80..d44b39d1 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -75,7 +75,7 @@ function Post({
       <PostHeader post={post} actionHandlers={actionHandlers} />
       <div className="d-flex my-2 text-break">
         {/* eslint-disable-next-line react/no-danger */}
-        <div dangerouslySetInnerHTML={{ __html: post.renderedBody }} />
+        <div id="post" dangerouslySetInnerHTML={{ __html: post.renderedBody }} />
       </div>
       {topicContext && topic && (
         <div className="border p-3 rounded mb-3 mt-2 align-self-start">
diff --git a/src/index.scss b/src/index.scss
index eb7db34c..973532fb 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -5,3 +5,11 @@
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
+
+
+#post, #comment, #reply {
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+}