fix(ui): prevent reasoning block from expanding chat playground layout

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" });
+  });
+});

ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx

@@ -27,7 +27,10 @@
       </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 wrap-break-word"
+          style={{ wordBreak: "break-word", overflowWrap: "break-word" }}
+        >
           <ReactMarkdown
             components={{
               code({
@@ -38,25 +41,32 @@
                 ...props
               }: React.ComponentPropsWithoutRef<"code"> & {
                 inline?: boolean;
                 node?: any;
               }) {
                 const match = /language-(\w+)/.exec(className || "");
                 return !inline && match ? (
                   <SyntaxHighlighter
                     style={coy as any}
                     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}