TINY-14188: fix ai code output background

[ztomaszyk]

Related Ticket: TINY-14188

Description of Changes:

• Updated white-space property for code blocks from pre to pre-wrap to allow text wrapping

Pre-checks:

• Changelog entry added
• Tests have been added (if applicable)
• Branch prefixed with feature/, hotfix/ or spike/

Review:

• Milestone set
• Docs ticket created (if applicable)

GitHub issues (if applicable):

Summary by CodeRabbit

• Bug Fixes
  • Improved code block display in AI chat conversations: long lines now wrap automatically while preserving whitespace formatting, reducing horizontal scrolling and improving readability.

[coderabbitai]

Walkthrough

Changed the CSS white-space value for AI chat code blocks from pre to pre-wrap, so long lines can wrap within .tox .tox-ai-html-content pre code while preserving preformatted spacing.

Changes

Cohort / File(s)	Summary
AI Chat Code Block Styling modules/oxide/src/less/theme/components/ai-chat/ai-chat-html-content.less	Changed .tox .tox-ai-html-content pre code { white-space: pre; } to white-space: pre-wrap;, enabling line wrapping in code blocks while keeping whitespace preservation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title mentions fixing 'ai code output background' but the actual change is updating the white-space CSS property from 'pre' to 'pre-wrap' for text wrapping behavior, not directly fixing background styling.	Update the title to accurately reflect the change, such as 'TINY-14188: allow ai code output text wrapping' or 'TINY-14188: fix ai code output line wrapping'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[ztomaszyk]

• TINY-14188: fix ai code output background #11060 👈 (View in Graphite)
• main

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

modules/oxide/src/less/theme/components/ai-chat/ai-chat-html-content.less (1)

`107-114`: **Consider adding padding to code blocks.**Now that code wraps with `white-space: pre-wrap`, wrapped text may appear cramped against the edges. Consider adding padding similar to inline code (line 102).

📦 Proposed padding addition

pre code { display: block; font-family: ui-monospace, monospace; background: var(--tox-private-separator-color, `@tinymce-separator-color`); border-radius: 4px; white-space: pre-wrap; + padding: 0.5em; margin: 1em 0; }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In @modules/oxide/src/less/theme/components/ai-chat/ai-chat-html-content.less
around lines 107 - 114, The pre code block lacks inner spacing after enabling
white-space: pre-wrap; update the pre code rule to add padding consistent with
the inline code rule (use the same padding values used for the inline code
selector) so wrapped lines don't touch the edges; locate the pre code selector
in ai-chat-html-content.less and apply the same padding property used by the
inline code style to maintain visual parity.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@modules/oxide/src/less/theme/components/ai-chat/ai-chat-html-content.less`:
- Line 112: The PR title is misleading: the diff only changes the CSS
white-space property (white-space: pre-wrap) in ai-chat-html-content.less to
enable text wrapping, while the background styling (set earlier near the
background declaration around line 110) was not modified; update the PR title
and description to reflect the actual change (e.g., "enable wrapping for AI
code/output text" or similar) and ensure any mention of background is removed or
corrected so the title matches the modification to white-space in
ai-chat-html-content.less.

---

Nitpick comments:
In `@modules/oxide/src/less/theme/components/ai-chat/ai-chat-html-content.less`:
- Around line 107-114: The pre code block lacks inner spacing after enabling
white-space: pre-wrap; update the pre code rule to add padding consistent with
the inline code rule (use the same padding values used for the inline `code`
selector) so wrapped lines don't touch the edges; locate the `pre code` selector
in ai-chat-html-content.less and apply the same padding property used by the
inline `code` style to maintain visual parity.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e70c352c-8ba9-47e0-bba1-71dfb7263ba9

📥 Commits

Reviewing files that changed from the base of the PR and between c885cd2 and 12909bb.

📒 Files selected for processing (1)

• modules/oxide/src/less/theme/components/ai-chat/ai-chat-html-content.less