From fb0f9a2cf8e5c95983df4d0a49c9af5ca40569a4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Tue, 25 Feb 2025 13:08:02 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20comment=20reference=20sn?=
 =?UTF-8?q?ippet=20overflowing=20(#22275)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref
https://linear.app/ghost/issue/DES-1106/support-escalation-re-ghostpro-comments-formatting-bug
- The `Replied to: comment..` snippet can contain links that can
overflow their container when they span multiple lines. Added
`break-all` CSS to force text wrapping, ensuring links stay within
boundaries.
---
 apps/comments-ui/src/components/content/Comment.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/comments-ui/src/components/content/Comment.tsx b/apps/comments-ui/src/components/content/Comment.tsx
index 550b461955..2e83e0e0ec 100644
--- a/apps/comments-ui/src/components/content/Comment.tsx
+++ b/apps/comments-ui/src/components/content/Comment.tsx
@@ -293,7 +293,7 @@ export const RepliedToSnippet: React.FC<{comment: Comment}> = ({comment}) => {
 
     const linkToReply = inReplyToComment && inReplyToComment.status === 'published';
 
-    const className = 'font-medium text-neutral-900/60 transition-colors dark:text-white/70';
+    const className = 'font-medium text-neutral-900/60 break-all transition-colors dark:text-white/70';
 
     return (
         linkToReply