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>