fix: make the post, comment, response content images responsive (#147)

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}

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}>

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">

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