Fix preview pane overflows when text cannot wrap (#538)

latitude-dev · Nov 4, 2024 · c3314bd · c3314bd
1 parent 050197f
commit c3314bd
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -78,6 +78,7 @@ const ContentValue = ({
     <TextComponent
       color={color}
       whiteSpace='preWrap'
+      wordBreak='breakAll'
       key={`${index}-${lineIndex}`}
     >
       {line}