From 32e3fa2e224a4683dbdbc91a1dac830e49bdca7e Mon Sep 17 00:00:00 2001
From: chakribontha <bonthachakri1@gmail.com>
Date: Wed, 9 Oct 2024 00:23:47 +0530
Subject: [PATCH] Fix comment overflow and ensure content fits within div

---
 src/Components/Resource/CommentSection.tsx  | 2 +-
 src/Components/Shifting/CommentsSection.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Resource/CommentSection.tsx b/src/Components/Resource/CommentSection.tsx
index 5a3d94687b3..3bfc46e7526 100644
--- a/src/Components/Resource/CommentSection.tsx
+++ b/src/Components/Resource/CommentSection.tsx
@@ -86,7 +86,7 @@ export const Comment = ({
 }: IComment) => (
   <div className="mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-4 text-secondary-800">
     <div className="flex w-full">
-      <p className="text-justify">{comment}</p>
+      <p className="prose break-words text-justify">{comment}</p>
     </div>
     <div className="mt-3">
       <span className="text-xs text-secondary-500">
diff --git a/src/Components/Shifting/CommentsSection.tsx b/src/Components/Shifting/CommentsSection.tsx
index ff826bec63f..7bb03cb915e 100644
--- a/src/Components/Shifting/CommentsSection.tsx
+++ b/src/Components/Shifting/CommentsSection.tsx
@@ -95,7 +95,7 @@ export const Comment = ({
       className="mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-4 text-secondary-800"
     >
       <div className="flex w-full">
-        <p className="text-justify">{comment}</p>
+        <p className="prose break-words text-justify">{comment}</p>
       </div>
       <div className="mt-3">
         <span className="text-xs text-secondary-500">