From c3314bda1eb374bc6edb5fbabf92dfc2d534e638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Rodr=C3=ADguez?= <alex@latitude.so>
Date: Mon, 4 Nov 2024 13:05:47 +0100
Subject: [PATCH] Fix preview pane overflows when text cannot wrap (#538)

---
 packages/web-ui/src/ds/atoms/Alert/index.tsx              | 2 +-
 packages/web-ui/src/ds/atoms/Text/index.tsx               | 3 +++
 .../web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx   | 8 +++++++-
 packages/web-ui/src/ds/molecules/Chat/Message/index.tsx   | 1 +
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/web-ui/src/ds/atoms/Alert/index.tsx b/packages/web-ui/src/ds/atoms/Alert/index.tsx
index 9d63f3ddc..f66a1480d 100644
--- a/packages/web-ui/src/ds/atoms/Alert/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Alert/index.tsx
@@ -40,7 +40,7 @@ export function Alert({
         />
       )}
       <div className='flex flex-row items-center gap-4 lg:gap-8 justify-between'>
-        <div className='flex flex-col gap-2'>
+        <div className='flex flex-col gap-2 whitespace-pre-wrap break-all'>
           {title && <AlertTitle>{title}</AlertTitle>}
           {description && <AlertDescription>{description}</AlertDescription>}
         </div>
diff --git a/packages/web-ui/src/ds/atoms/Text/index.tsx b/packages/web-ui/src/ds/atoms/Text/index.tsx
index bb22c06d1..cac254057 100644
--- a/packages/web-ui/src/ds/atoms/Text/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Text/index.tsx
@@ -282,6 +282,7 @@ namespace Text {
     size?: FontSize
     textTransform?: 'none' | 'uppercase' | 'lowercase'
     whiteSpace?: WhiteSpace
+    wordBreak?: WordBreak
   }
 
   export const Mono = forwardRef<HTMLSpanElement, MonoProps>(function MonoFont(
@@ -290,6 +291,7 @@ namespace Text {
       color = 'foreground',
       overflow = 'auto',
       whiteSpace = 'pre',
+      wordBreak = 'normal',
       underline = false,
       lineThrough = false,
       size = 'h6',
@@ -312,6 +314,7 @@ namespace Text {
           font.weight[weight],
           colors.textColors[color],
           overflowOptions[overflow],
+          wordBreakOptions[wordBreak],
           {
             [display]: !ellipsis,
             [whiteSpaceOptions[whiteSpace]]: !!whiteSpace,
diff --git a/packages/web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx b/packages/web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx
index fb5cc3686..95a82e5c1 100644
--- a/packages/web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx
+++ b/packages/web-ui/src/ds/molecules/Chat/ErrorMessage/index.tsx
@@ -13,7 +13,13 @@ export function ErrorMessage({ error }: { error: Error }) {
             .split('\n')
             .map((line, index) => (
               <div key={index} className='inline-block leading-none'>
-                <Text.Mono color='destructive'>{line}</Text.Mono>
+                <Text.Mono
+                  color='destructive'
+                  whiteSpace='preWrap'
+                  wordBreak='breakAll'
+                >
+                  {line}
+                </Text.Mono>
               </div>
             ))}
         </div>
diff --git a/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx b/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
index f27a69a75..3694ff89d 100644
--- a/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
+++ b/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
@@ -78,6 +78,7 @@ const ContentValue = ({
     <TextComponent
       color={color}
       whiteSpace='preWrap'
+      wordBreak='breakAll'
       key={`${index}-${lineIndex}`}
     >
       {line}