From 4c3017e2edfd01066c8ca71995a6c89e928f0403 Mon Sep 17 00:00:00 2001
From: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
Date: Wed, 29 Jul 2026 11:55:52 +0200
Subject: [PATCH] fix(ui): wrap long Lighthouse chat messages (#12215)

---
 .../chat/message-bubble.browser.test.tsx      | 47 +++++++++++++++++++
 .../_components/chat/message-bubble.tsx       |  2 +-
 .../lighthouse-chat-message-overflow.fixed.md |  1 +
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/(prowler)/lighthouse/_components/chat/message-bubble.browser.test.tsx
 create mode 100644 ui/changelog.d/lighthouse-chat-message-overflow.fixed.md

diff --git a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.browser.test.tsx b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.browser.test.tsx
new file mode 100644
index 0000000000..30d33d1b61
--- /dev/null
+++ b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.browser.test.tsx
@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+
+import { render } from "@/__tests__/render-browser";
+import {
+  LIGHTHOUSE_V2_MESSAGE_ROLE,
+  LIGHTHOUSE_V2_PART_TYPE,
+  type LighthouseV2Message,
+} from "@/app/(prowler)/lighthouse/_types";
+
+import { MessageBubble } from "./message-bubble";
+
+describe("MessageBubble", () => {
+  it("should wrap long user text inside the message bubble", async () => {
+    // Given
+    const longText = "a".repeat(500);
+    const userMessage: LighthouseV2Message = {
+      id: "message-user-long-text",
+      role: LIGHTHOUSE_V2_MESSAGE_ROLE.USER,
+      model: null,
+      tokenUsage: null,
+      insertedAt: "2026-06-25T10:00:00Z",
+      parts: [
+        {
+          id: "part-user-long-text",
+          type: LIGHTHOUSE_V2_PART_TYPE.TEXT,
+          content: { text: longText },
+          toolCallOutcome: null,
+          insertedAt: "2026-06-25T10:00:00Z",
+          updatedAt: "2026-06-25T10:00:00Z",
+        },
+      ],
+    };
+
+    // When
+    const { getByText } = await render(
+      <div style={{ width: 320 }}>
+        <MessageBubble message={userMessage} />
+      </div>,
+    );
+    const messageText = getByText(longText).element();
+
+    // Then
+    expect(messageText.scrollWidth).toBeLessThanOrEqual(
+      messageText.clientWidth,
+    );
+  });
+});
diff --git a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx
index 1a9a962622..9a62cd4610 100644
--- a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx
@@ -76,7 +76,7 @@ export function MessageBubble({ message }: { message: LighthouseV2Message }) {
           {/* User text stays plain to preserve HTML-like tags; assistant
               renders parts in order so tool calls sit between text blocks. */}
           {isUser ? (
-            <p className="whitespace-pre-wrap">{messageText}</p>
+            <p className="wrap-break-word whitespace-pre-wrap">{messageText}</p>
           ) : (
             <AssistantParts parts={message.parts} />
           )}
diff --git a/ui/changelog.d/lighthouse-chat-message-overflow.fixed.md b/ui/changelog.d/lighthouse-chat-message-overflow.fixed.md
new file mode 100644
index 0000000000..3c8925a809
--- /dev/null
+++ b/ui/changelog.d/lighthouse-chat-message-overflow.fixed.md
@@ -0,0 +1 @@
+Long unbroken messages in Lighthouse chat no longer overflow their message bubble