fix(frontend): prevent user message bubble overflow with long unbreakable strings (#3488)

- Add max-w-full min-w-0 to user message wrapper div to constrain width
- Change bubble width from w-fit to w-full max-w-full for consistent layout
- Add break-words to user message content for long string wrapping
- Add overflow-x-clip as defensive overflow protection

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>

frontend/src/components/workspace/messages/message-list-item.tsx

@@ -302,6 +302,7 @@ function MessageContent_({
   if (isHuman) {
     const messageResponse = contentToDisplay ? (
       <AIElementMessageResponse
+        className="break-words"
         remarkPlugins={humanMessagePlugins.remarkPlugins}
         rehypePlugins={humanMessagePlugins.rehypePlugins}
         components={components}
@@ -311,10 +312,15 @@ function MessageContent_({
       </AIElementMessageResponse>
     ) : null;
     return (
-      <div className={cn("ml-auto flex flex-col gap-2", className)}>
+      <div
+        className={cn(
+          "ml-auto flex max-w-full min-w-0 flex-col gap-2",
+          className,
+        )}
+      >
         {filesList}
         {messageResponse && (
-          <AIElementMessageContent className="w-fit">
+          <AIElementMessageContent className="w-full max-w-full">
             {messageResponse}
           </AIElementMessageContent>
         )}