Wrap link preview description for long words (#9683)

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

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;

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: {