From d500dcb0428a850e807d4411656ed5f6cfe55ea5 Mon Sep 17 00:00:00 2001
From: yusufipk <yusufipek@protonmail.com>
Date: Fri, 10 Jul 2026 19:33:03 +0700
Subject: [PATCH] fix: preserve newlines/paragraph breaks in rendered comments

Comment content was stored with newlines intact but rendered inside <p>
elements with default white-space, collapsing line breaks into single
spaces. Add whitespace-pre-wrap (and break-words) to the comment/reply
render wrappers in the comments pane and the compare-versions view.
---
 .../videos/[videoId]/compare/compare-versions-page-client.tsx | 2 +-
 components/video-page/comments-pane.tsx                       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/compare-versions-page-client.tsx b/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/compare-versions-page-client.tsx
index ef9fd40..201685b 100644
--- a/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/compare-versions-page-client.tsx
+++ b/app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/compare-versions-page-client.tsx
@@ -822,7 +822,7 @@ export default function CompareVersionsPageClient({
                                 </button>
                               </div>
                               {comment.content && (
-                                <p className="text-muted-foreground leading-relaxed">
+                                <p className="text-muted-foreground leading-relaxed whitespace-pre-wrap break-words">
                                   {comment.content}
                                 </p>
                               )}
diff --git a/components/video-page/comments-pane.tsx b/components/video-page/comments-pane.tsx
index f170569..2ebaf7a 100644
--- a/components/video-page/comments-pane.tsx
+++ b/components/video-page/comments-pane.tsx
@@ -587,7 +587,7 @@ export const CommentsPane = memo(function CommentsPane({
                     ) : (
                       <div className="mb-2">
                         {comment.content && (
-                          <p className="text-sm mb-2">
+                          <p className="text-sm mb-2 whitespace-pre-wrap break-words">
                             <CommentRichText
                               text={comment.content}
                               onAssetMentionClick={onAssetMentionClick}
@@ -793,7 +793,7 @@ export const CommentsPane = memo(function CommentsPane({
                               ) : (
                                 <div className="mb-1">
                                   {reply.content && (
-                                    <p className="text-sm">
+                                    <p className="text-sm whitespace-pre-wrap break-words">
                                       <CommentRichText
                                         text={reply.content}
                                         onAssetMentionClick={onAssetMentionClick}