From 0a40bd7ae5e8578eba0c60fe4efb60510eb032f9 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 9 Jul 2026 11:47:51 -0700
Subject: [PATCH] fix(ui): prevent reasoning block from expanding chat
 playground layout (#32485)

The expanded reasoning block did not constrain its width or break long unbreakable tokens, so its inline-block bubble grew past its max width and pushed the whole page wider (#32481). Mirror the message body handling by capping the container width and breaking long words/code.

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../chat_ui/ReasoningContent.test.tsx         | 32 +++++++++++++++++++
 .../components/chat_ui/ReasoningContent.tsx   | 14 ++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.test.tsx

diff --git a/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.test.tsx b/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.test.tsx
new file mode 100644
index 00000000000..35540d3ebde
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import ReasoningContent from "./ReasoningContent";
+
+describe("ReasoningContent", () => {
+  it("should render nothing when reasoningContent is empty", () => {
+    const { container } = render(<ReasoningContent reasoningContent="" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should show reasoning content expanded by default and toggle on click", () => {
+    render(<ReasoningContent reasoningContent="thinking hard" />);
+
+    expect(screen.getByText("thinking hard")).toBeInTheDocument();
+    expect(screen.getByText("Hide reasoning")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(screen.queryByText("thinking hard")).not.toBeInTheDocument();
+    expect(screen.getByText("Show reasoning")).toBeInTheDocument();
+  });
+
+  it("should constrain width and break long words so it cannot expand the layout (regression #32481)", () => {
+    const longToken = "a".repeat(500);
+    render(<ReasoningContent reasoningContent={longToken} />);
+
+    const contentBox = screen.getByText(longToken).closest("div.mt-2");
+    expect(contentBox).not.toBeNull();
+    expect(contentBox).toHaveClass("max-w-full");
+    expect(contentBox).toHaveStyle({ wordBreak: "break-word", overflowWrap: "break-word" });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx b/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx
index e537c6de79f..30ba2d3fd95 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx
@@ -27,7 +27,10 @@ const ReasoningContent: React.FC<ReasoningContentProps> = ({ reasoningContent })
       </Button>
 
       {isExpanded && (
-        <div className="mt-2 p-3 bg-gray-50 border border-gray-200 rounded-md text-sm text-gray-700">
+        <div
+          className="mt-2 p-3 bg-gray-50 border border-gray-200 rounded-md text-sm text-gray-700 max-w-full overflow-x-auto whitespace-pre-wrap break-words"
+          style={{ wordBreak: "break-word", overflowWrap: "break-word" }}
+        >
           <ReactMarkdown
             components={{
               code({
@@ -47,16 +50,23 @@ const ReasoningContent: React.FC<ReasoningContentProps> = ({ reasoningContent })
                     language={match[1]}
                     PreTag="div"
                     className="rounded-md my-2"
+                    wrapLines={true}
+                    wrapLongLines={true}
                     {...props}
                   >
                     {String(children).replace(/\n$/, "")}
                   </SyntaxHighlighter>
                 ) : (
-                  <code className={`${className} px-1.5 py-0.5 rounded-sm bg-gray-100 text-sm font-mono`} {...props}>
+                  <code
+                    className={`${className} px-1.5 py-0.5 rounded-sm bg-gray-100 text-sm font-mono`}
+                    style={{ wordBreak: "break-word" }}
+                    {...props}
+                  >
                     {children}
                   </code>
                 );
               },
+              pre: ({ node, ...props }) => <pre style={{ overflowX: "auto", maxWidth: "100%" }} {...props} />,
             }}
           >
             {reasoningContent}