From 722da9616f79fa97f2932c462b0fdeed2b89700c Mon Sep 17 00:00:00 2001
From: ayesha waris <73840786+ayeshoali@users.noreply.github.com>
Date: Fri, 20 Jan 2023 13:15:44 +0500
Subject: [PATCH] fix: page width does not increase due to long text (#412)

---
 src/discussions/comments/comment/Comment.jsx | 46 ++++++++++----------
 src/discussions/comments/comment/Reply.jsx   |  2 +-
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/discussions/comments/comment/Comment.jsx b/src/discussions/comments/comment/Comment.jsx
index 733dc9b8..99284348 100644
--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -112,7 +112,7 @@ function Comment({
             ? (
               <CommentEditor comment={comment} onCloseEditor={() => setEditing(false)} formClasses="pt-3" />
             )
-            : <HTMLLoader cssClassName="comment-body pt-4 text-primary-500" componentId="comment" htmlNode={comment.renderedBody} />}
+            : <HTMLLoader cssClassName="comment-body text-break pt-4 text-primary-500" componentId="comment" htmlNode={comment.renderedBody} />}
           <CommentIcons
             comment={comment}
             following={comment.following}
@@ -132,18 +132,18 @@ function Comment({
             ))}
           </div>
           {hasMorePages && (
-          <Button
-            onClick={handleLoadMoreComments}
-            variant="link"
-            block="true"
-            className="mt-4.5 font-size-14 font-style-normal font-family-inter font-weight-500 px-2.5 py-2"
-            data-testid="load-more-comments-responses"
-            style={{
-              lineHeight: '20px',
-            }}
-          >
-            {intl.formatMessage(messages.loadMoreComments)}
-          </Button>
+            <Button
+              onClick={handleLoadMoreComments}
+              variant="link"
+              block="true"
+              className="mt-4.5 font-size-14 font-style-normal font-family-inter font-weight-500 px-2.5 py-2"
+              data-testid="load-more-comments-responses"
+              style={{
+                lineHeight: '20px',
+              }}
+            >
+              {intl.formatMessage(messages.loadMoreComments)}
+            </Button>
           )}
           {!isNested && showFullThread && (
             isReplying ? (
@@ -159,16 +159,16 @@ function Comment({
               <>
                 {!isClosedPost && userCanAddThreadInBlackoutDate
                   && (
-                  <Button
-                    className="d-flex flex-grow mt-3 py-2 font-size-14"
-                    variant="outline-primary"
-                    style={{
-                      lineHeight: '20px',
-                    }}
-                    onClick={() => setReplying(true)}
-                  >
-                    {intl.formatMessage(messages.addComment)}
-                  </Button>
+                    <Button
+                      className="d-flex flex-grow mt-3 py-2 font-size-14"
+                      variant="outline-primary"
+                      style={{
+                        lineHeight: '20px',
+                      }}
+                      onClick={() => setReplying(true)}
+                    >
+                      {intl.formatMessage(messages.addComment)}
+                    </Button>
                   )}
               </>
 
diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx
index c1ff1568..0d91876f 100644
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/src/discussions/comments/comment/Reply.jsx
@@ -125,7 +125,7 @@ function Reply({
           </div>
           {isEditing
             ? <CommentEditor comment={reply} onCloseEditor={() => setEditing(false)} />
-            : <HTMLLoader componentId="reply" htmlNode={reply.renderedBody} cssClassName="text-primary-500" />}
+            : <HTMLLoader componentId="reply" htmlNode={reply.renderedBody} cssClassName="text-break text-primary-500" />}
         </div>
       </div>
       <div className="text-gray-500 align-self-end mt-2" title={reply.createdAt}>