fix: cap JSON editor max height at 400px in message views

[impoiler]

Summary

JSON editors in the message views (assistant, system, user, tool call, and tool call result) could grow unbounded when displaying large JSON payloads, making the UI difficult to use. This PR caps the auto-resizing height of those editors at 400px.

Changes

• Added maxHeight={400} to the auto-resizing JSON editor in each message view component, preventing the editor from expanding beyond 400px regardless of content size.

Type of change

• Bug fix

Affected areas

• UI (React)

How to test

1. Open a prompt with a message containing a large JSON payload (assistant, system, user, tool call, or tool call result).
2. Verify that the JSON editor expands as content grows but stops at 400px and becomes scrollable rather than continuing to expand.

cd ui
pnpm i || npm i
pnpm build || npm run build

Screenshots/Recordings

Before: JSON editors expand to the full height of the content, pushing other elements far down the page.

After: JSON editors cap at 400px and scroll internally for content that exceeds that height.

Breaking changes

• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (5)

• ui/components/prompts/components/messagesView/assistantMessageView.tsx is excluded by none and included by none
• ui/components/prompts/components/messagesView/systemMessageView.tsx is excluded by none and included by none
• ui/components/prompts/components/messagesView/toolCallResultView.tsx is excluded by none and included by none
• ui/components/prompts/components/messagesView/toolCallView.tsx is excluded by none and included by none
• ui/components/prompts/components/messagesView/userMessageView.tsx is excluded by none and included by none

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: e84d5f38-9e50-4e7b-80a1-9c4729a3a6d0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 05-28-refactor_prompt_messages_json_content_view

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[impoiler]

• fix: cap JSON editor max height at 400px in message views #3842 👈 (View in Graphite)
• feat: add tool call execution, stop streaming, and redesign tool call UI #3837
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[Pratham-Mishra04]

Merge activity

• May 28, 12:09 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 28, 12:12 PM UTC: Graphite rebased this pull request as part of a merge.
• May 28, 12:13 PM UTC: @Pratham-Mishra04 merged this pull request with Graphite.

[greptile-apps]

Confidence Score: 4/5

The height cap is applied correctly, but content above 400px will be clipped and unreachable until vertical scrolling is also enabled.

The maxHeight prop stops the editor from growing, but codeEditor.tsx defaults the Monaco vertical scrollbar to hidden — meaning any JSON taller than 400px is silently cut off rather than scrollable. The PR's stated goal (content becomes scrollable at the cap) is not met without also setting showVerticalScrollbar: true in the options prop across all five changed files.

All five changed message-view files need options={{ showVerticalScrollbar: true }} added alongside maxHeight={400}.

Important Files Changed

Filename	Overview
ui/components/prompts/components/messagesView/assistantMessageView.tsx	Adds maxHeight={400} to cap JSON editor growth, but omits showVerticalScrollbar: true — content beyond 400px is unreachable
ui/components/prompts/components/messagesView/systemMessageView.tsx	Same maxHeight cap without enabling vertical scroll — overflow content inaccessible
ui/components/prompts/components/messagesView/toolCallResultView.tsx	Same maxHeight cap without enabling vertical scroll — overflow content inaccessible
ui/components/prompts/components/messagesView/toolCallView.tsx	Same maxHeight cap without enabling vertical scroll — overflow content inaccessible
ui/components/prompts/components/messagesView/userMessageView.tsx	Same maxHeight cap without enabling vertical scroll — overflow content inaccessible

_{Reviews (2): Last reviewed commit: "refactor: prompt messages json content v..." | Re-trigger Greptile}

[greptile-apps]

Content above 400px is silently clipped — no vertical scrollbar

codeEditor.tsx line 162 sets vertical: props.options?.showVerticalScrollbar ? "auto" : "hidden", so the vertical scrollbar is hidden by default. When maxHeight={400} clamps the auto-resize, Monaco's container stops growing but the internal scrollbar remains hidden, making any JSON taller than 400px completely inaccessible. The PR description says the editor should "become scrollable" at the cap, but without showVerticalScrollbar: true in options, overflow content is just cut off. The same fix is needed in all five changed files (systemMessageView.tsx, toolCallResultView.tsx, toolCallView.tsx, userMessageView.tsx).