From f82983c6fa06ef692a0160fb6fa52d977f3c19d7 Mon Sep 17 00:00:00 2001
From: Matthew Diamant <mdiamant@squareup.com>
Date: Sat, 22 Mar 2025 10:55:12 -0700
Subject: [PATCH] Fix chat width issues (#1813)

---
 ui/desktop/src/components/UserMessage.tsx    | 2 +-
 ui/desktop/src/components/ui/scroll-area.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
index fd287b8c..ed4f74da 100644
--- a/ui/desktop/src/components/UserMessage.tsx
+++ b/ui/desktop/src/components/UserMessage.tsx
@@ -23,7 +23,7 @@ export default function UserMessage({ message }: UserMessageProps) {
       <div className="flex-col max-w-[85%]">
         <div className="flex flex-col group">
           <div className="flex bg-slate text-white rounded-xl rounded-br-none py-2 px-3">
-            <div ref={contentRef}>
+            <div className="break-all" ref={contentRef}>
               <MarkdownContent content={textContent} className="text-white" />
             </div>
           </div>
diff --git a/ui/desktop/src/components/ui/scroll-area.tsx b/ui/desktop/src/components/ui/scroll-area.tsx
index 607b263b..22e19f5d 100644
--- a/ui/desktop/src/components/ui/scroll-area.tsx
+++ b/ui/desktop/src/components/ui/scroll-area.tsx
@@ -73,7 +73,10 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
         className={cn('relative overflow-hidden', className)}
         {...props}
       >
-        <ScrollAreaPrimitive.Viewport ref={viewportRef} className="h-full w-full rounded-[inherit]">
+        <ScrollAreaPrimitive.Viewport
+          ref={viewportRef}
+          className="h-full w-full rounded-[inherit] [&>div]:!block"
+        >
           {children}
           {autoScroll && <div ref={viewportEndRef} style={{ height: '1px' }} />}
         </ScrollAreaPrimitive.Viewport>