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

[devin-ai-integration]

Relevant issues

Fixes #32481

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Screenshots / Proof of Fix

Reproduced live in the chat playground (ui/litellm-dashboard dev server on :3000 talking to a real proxy on :4000). Since the bug only needs a reasoning payload that contains a single unbreakable token, I streamed one through the real proxy from a local OpenAI-compatible backend whose response carries reasoning_content with a ~450 char token that has no spaces or hyphens, then sent a message from the playground. The UI path (streaming parse -> ChatMessageBubble -> ReasoningContent) is exactly what an end user hits with a real reasoning model; only the token content is seeded so the repro is deterministic

BEFORE (pre-fix component, matching base litellm_internal_staging @ cd6e8cd): the expanded reasoning block keeps the long token on one line, so the assistant bubble grows past its max-w-[80%] cap and the chat area gets a horizontal scrollbar

AFTER (@ ff5c073): the same reasoning payload wraps inside the bubble, the bubble stays within its cap and there is no horizontal scroll

Type

🐛 Bug Fix

Changes

ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx: constrain the expanded reasoning container width and break long words/code so it cannot push the layout wider. This mirrors the handling already used for the message body in ChatMessageBubble: the container caps at max-w-full, wraps long words (wordBreak/overflowWrap: break-word), scrolls overflow within itself (overflow-x-auto), and long code lines wrap via wrapLongLines with a pre capped at maxWidth: 100%. Also uses the valid Tailwind break-words class (was wrap-break-word, which Tailwind silently ignores) per Greptile feedback

Added ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.test.tsx with a regression test that renders a long unbreakable token and asserts the container caps its width and breaks long words. The test fails on the pre-fix component and passes after

Link to Devin session: https://app.devin.ai/sessions/28a101fae22343fcb8e5ab66c3750533

Link to Devin session: https://app.devin.ai/sessions/08d2a4c499964900800e7e43849024f1
Requested by: @ishaan-berri

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[greptile-apps]

Greptile Summary

This PR constrains the ReasoningContent component so that long unbreakable tokens in a reasoning payload can no longer push the chat playground layout wider than the viewport, matching how the message bubble already limits its own width.

• ReasoningContent.tsx: the expanded container gains max-w-full overflow-x-auto whitespace-pre-wrap Tailwind classes and wordBreak/overflowWrap: break-word inline styles; SyntaxHighlighter gets wrapLines/wrapLongLines; a custom pre renderer caps width at 100% for unmarked code fences.
• ReasoningContent.test.tsx: adds three unit tests — empty content, expand/collapse toggle, and a regression test verifying the container carries the layout-constraining class and styles.

Confidence Score: 4/5

Safe to merge; the change is confined to presentation logic in a single UI component with a companion regression test.

The fix is correct and targeted. The only imperfection is the non-existent Tailwind class wrap-break-word (the correct class is break-words), which has no runtime effect because the inline style prop already handles it. The regression test verifies the right styles are present and would have caught the original bug.

No files require special attention beyond the bogus Tailwind class in ReasoningContent.tsx.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.tsx	Adds width-constraining and word-break styles to prevent the reasoning block from expanding the chat layout; one non-existent Tailwind class (wrap-break-word) was introduced but is functionally harmless since the inline style prop covers the same behavior.
ui/litellm-dashboard/src/components/chat_ui/ReasoningContent.test.tsx	New test file covering empty content, expand/collapse toggle, and the regression that ensures the container carries the layout-constraining class and word-break styles.

_{Reviews (1): Last reviewed commit: "fix(ui): prevent reasoning block from ex..." | Re-trigger Greptile}

[greptile-apps]

wrap-break-word is not a valid Tailwind CSS utility class and will be silently ignored by the browser. The correct Tailwind class for overflow-wrap: break-word is break-words. The actual break-word behavior here is covered by the inline style prop, so this is harmless but dead/misleading code.

Suggested change

	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"
	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"

[codspeed-hq]

Merging this PR will improve performance by 26.69%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 2 improved benchmarks
✅ 28 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	test_completion_with_tools	4.2 ms	3.2 ms	+31.16%
⚡	test_completion_simple_message	4 ms	3.3 ms	+22.38%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing litellm_fix_reasoning_block_ui_overflow (ff5c073) with litellm_internal_staging (bfff5e8)}