From 1b0df388ef8d5aa9b2a6c666a43485359e040220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Wed, 25 Mar 2026 23:00:15 +0000
Subject: [PATCH] fix(web): wrap long lines in markdown chat messages (#469)

---
 apps/web/app/globals.css                      |   9 +-
 .../codemirror/codemirror-code-block.tsx      |   2 +-
 .../editors/monaco/monaco-code-block.tsx      |   2 +-
 .../editors/shiki/shiki-code-block.tsx        |   2 +-
 apps/web/e2e/tests/markdown-wrap.spec.ts      | 112 ++++++++++++++++++
 5 files changed, 123 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/e2e/tests/markdown-wrap.spec.ts

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 4f15238a98..e93f13176c 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -600,6 +600,7 @@
   font-size: 13px;
   line-height: 1.625;
   color: var(--foreground);
+  overflow-wrap: anywhere;
   font-family:
     -apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji";
@@ -637,6 +638,11 @@
   line-height: 1.625;
 }
 
+.markdown-body pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .markdown-body ul {
   list-style-type: disc;
   padding-left: 1.25rem;
@@ -1345,7 +1351,8 @@
 .shiki-code-block pre.shiki {
   margin: 0;
   padding: 8px 12px;
-  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
   font-size: var(--font-mono-size);
   line-height: 1.5;
   background-color: var(--background) !important;
diff --git a/apps/web/components/editors/codemirror/codemirror-code-block.tsx b/apps/web/components/editors/codemirror/codemirror-code-block.tsx
index 0ee9b4e37d..e879576483 100644
--- a/apps/web/components/editors/codemirror/codemirror-code-block.tsx
+++ b/apps/web/components/editors/codemirror/codemirror-code-block.tsx
@@ -40,7 +40,7 @@ export function CodeMirrorCodeBlock({ children, className }: CodeBlockProps) {
   };
 
   return (
-    <div className="relative group/code-block my-4 w-fit max-w-full min-w-[50%]">
+    <div className="relative group/code-block my-4 max-w-full">
       {/* Copy button */}
       <button
         onClick={handleCopy}
diff --git a/apps/web/components/editors/monaco/monaco-code-block.tsx b/apps/web/components/editors/monaco/monaco-code-block.tsx
index 7dc13ef151..3304a29e2d 100644
--- a/apps/web/components/editors/monaco/monaco-code-block.tsx
+++ b/apps/web/components/editors/monaco/monaco-code-block.tsx
@@ -28,7 +28,7 @@ export function MonacoCodeBlock({ children, className }: MonacoCodeBlockProps) {
   const height = Math.min(Math.max(lineCount * 16 + 8, 32), 500);
 
   return (
-    <div className="relative group/code-block my-4 w-fit max-w-full min-w-[50%]">
+    <div className="relative group/code-block my-4 max-w-full">
       <button
         onClick={() => copy(code)}
         className={cn(
diff --git a/apps/web/components/editors/shiki/shiki-code-block.tsx b/apps/web/components/editors/shiki/shiki-code-block.tsx
index 0043de02e3..d7b54d51be 100644
--- a/apps/web/components/editors/shiki/shiki-code-block.tsx
+++ b/apps/web/components/editors/shiki/shiki-code-block.tsx
@@ -31,7 +31,7 @@ export function ShikiCodeBlock({ children, className }: ShikiCodeBlockProps) {
   }, [code, lang, isDark]);
 
   return (
-    <div className="relative group/code-block my-4 w-fit max-w-full min-w-[50%]">
+    <div className="relative group/code-block my-4 max-w-full">
       <button
         onClick={() => copy(code)}
         className={cn(
diff --git a/apps/web/e2e/tests/markdown-wrap.spec.ts b/apps/web/e2e/tests/markdown-wrap.spec.ts
new file mode 100644
index 0000000000..d7fdb24e0b
--- /dev/null
+++ b/apps/web/e2e/tests/markdown-wrap.spec.ts
@@ -0,0 +1,112 @@
+import { test, expect } from "../fixtures/test-base";
+import { KanbanPage } from "../pages/kanban-page";
+import { SessionPage } from "../pages/session-page";
+
+const LONG_WORD = "abcdefghij".repeat(30); // 300 chars, no spaces
+
+/** Create a task with a mock agent message containing the given text. */
+async function createTaskWithMessage(
+  testPage: import("@playwright/test").Page,
+  apiClient: import("../helpers/api-client").ApiClient,
+  seedData: import("../fixtures/test-base").SeedData,
+  title: string,
+  messageText: string,
+): Promise<SessionPage> {
+  await apiClient.createTaskWithAgent(seedData.workspaceId, title, seedData.agentProfileId, {
+    description: `e2e:message("${messageText}")`,
+    workflow_id: seedData.workflowId,
+    workflow_step_id: seedData.startStepId,
+    repository_ids: [seedData.repositoryId],
+  });
+
+  const kanban = new KanbanPage(testPage);
+  await kanban.goto();
+
+  const card = kanban.taskCardByTitle(title);
+  await expect(card).toBeVisible({ timeout: 30_000 });
+  await card.click();
+  await expect(testPage).toHaveURL(/\/s\//, { timeout: 15_000 });
+
+  const session = new SessionPage(testPage);
+  await session.waitForLoad();
+  return session;
+}
+
+/** Assert no .markdown-body element overflows horizontally. */
+async function expectNoMarkdownOverflow(testPage: import("@playwright/test").Page) {
+  const overflows = await testPage.evaluate(() => {
+    const els = document.querySelectorAll(".markdown-body");
+    return Array.from(els).some((el) => el.scrollWidth > el.clientWidth + 1);
+  });
+  expect(overflows).toBe(false);
+}
+
+test.describe("Markdown text wrapping", () => {
+  test("long plain text wraps within the chat message container", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    test.setTimeout(90_000);
+
+    const session = await createTaskWithMessage(
+      testPage,
+      apiClient,
+      seedData,
+      "Wrap Plain Text",
+      `Here is a finding: ${LONG_WORD} - end of finding`,
+    );
+
+    await expect(session.chat.getByText("end of finding").last()).toBeVisible({
+      timeout: 30_000,
+    });
+
+    await expectNoMarkdownOverflow(testPage);
+  });
+
+  test("long inline code wraps within the chat message container", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    test.setTimeout(90_000);
+
+    const session = await createTaskWithMessage(
+      testPage,
+      apiClient,
+      seedData,
+      "Wrap Inline Code",
+      `Check this path: \`${LONG_WORD}\` for details`,
+    );
+
+    await expect(session.chat.getByText("for details").last()).toBeVisible({
+      timeout: 30_000,
+    });
+
+    await expectNoMarkdownOverflow(testPage);
+  });
+
+  test("long lines in code blocks do not overflow the message container", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    test.setTimeout(90_000);
+
+    // Fenced code block with a long line — should be contained via
+    // horizontal scroll (shiki) or line wrapping (codemirror)
+    const session = await createTaskWithMessage(
+      testPage,
+      apiClient,
+      seedData,
+      "Wrap Code Block",
+      `Code block:\\n\`\`\`\\nconst x = "${LONG_WORD}";\\n\`\`\`\\nAfter code block`,
+    );
+
+    await expect(session.chat.getByText("After code block").last()).toBeVisible({
+      timeout: 30_000,
+    });
+
+    await expectNoMarkdownOverflow(testPage);
+  });
+});