From eb9fd85151a9cc2ddac92d377c39977100036a8f Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Wed, 29 Jan 2025 10:37:31 -0800
Subject: [PATCH] Wrap link preview description for long words (#9662)

---
 stylesheets/_modules.scss                     |  3 +++
 .../conversation/TimelineMessage.stories.tsx  | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 4193a09cd..b7b5446f2 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1082,6 +1082,9 @@ $message-padding-horizontal: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
 
   @include mixins.light-theme {
     color: variables.$color-gray-90;
diff --git a/ts/components/conversation/TimelineMessage.stories.tsx b/ts/components/conversation/TimelineMessage.stories.tsx
index 48e2ce397..28f1274db 100644
--- a/ts/components/conversation/TimelineMessage.stories.tsx
+++ b/ts/components/conversation/TimelineMessage.stories.tsx
@@ -916,6 +916,31 @@ LinkPreviewInGroup.args = {
   conversationType: 'group',
 };
 
+export const LinkPreviewWithLongWord = Template.bind({});
+LinkPreviewWithLongWord.args = {
+  previews: [
+    {
+      domain: 'signal.org',
+      image: fakeAttachment({
+        contentType: IMAGE_PNG,
+        fileName: 'the-sax.png',
+        height: 240,
+        url: pngUrl,
+        width: 320,
+      }),
+      isStickerPack: false,
+      isCallLink: false,
+      title: 'Signal',
+      description: `Say "hello" to a ${'Different'.repeat(10)} messaging experience.`,
+      url: 'https://www.signal.org',
+      date: new Date(2020, 2, 10).valueOf(),
+    },
+  ],
+  status: 'sent',
+  text: 'Be sure to look at https://www.signal.org',
+  conversationType: 'group',
+};
+
 export const LinkPreviewWithQuote = Template.bind({});
 LinkPreviewWithQuote.args = {
   quote: {