Fix broken inline code pill rendering when wrapping across lines

[7487]

Purpose

Inline code pills in the docs (the .markdown code styling in docs/src/css/custom.css) get a border, background, and padding. With the CSS default box-decoration-break: slice, a pill that wraps at the end of a line is cut apart: the border and padding are sliced at the break, leaving a stray half-box at the end of one line and an open-edged fragment with misaligned content at the start of the next, as shown in the issue screenshot.

Approach

Add box-decoration-break: clone (plus the -webkit- prefix for Safari) to the existing inline code rule, so each line fragment renders as a complete pill with its own border, radius, and padding on all sides.

Verified by reproducing the wrap locally with the same rule: with slice (current behavior) the pill fragments into broken half-boxes at the line break; with clone each fragment is a clean, fully enclosed pill. This also keeps long inline code able to wrap, so it cannot cause horizontal overflow of the page.

This was implemented with AI assistance (Claude Code), and reviewed by me.

Related Issues

• Fixes [Docs] Code overflow has UI issues #5235

Related PRs

• N/A

Checklist

• Followed the contribution guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
  • Ran Vale and fixed all errors and warnings
• Tests provided. (Add links if there are any)
  • Unit Tests
  • Integration Tests
• Breaking changes. (Fill if applicable)
  • Breaking changes section filled.
  • breaking change label added.

Security checks

• Followed secure coding standards in WSO2 Secure Coding Guidelines
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

Summary by CodeRabbit

• Style
  • Improved inline code formatting so wrapped code pills retain consistent borders and padding across lines and browsers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: c44d6fb0-5ea8-4fc3-a95c-cd02b97043b6

📥 Commits

Reviewing files that changed from the base of the PR and between 4be6fa7 and 292b484.

📒 Files selected for processing (1)

• docs/src/css/custom.css

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The documentation stylesheet now applies standard and WebKit box-decoration-break: clone behavior to wrapped inline code pills.

Changes

Inline code overflow styling

Layer / File(s)	Summary
Wrapped code decoration docs/src/css/custom.css	Wrapped inline code fragments retain complete borders and padding through standard and WebKit box-decoration rules.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to 292b4

The localized CSS change makes wrapped inline code fragments render as complete pills without changing application behavior; no actionable merge-blocking risk remains.

Suggested labels: skip-changelog

Suggested reviewers: himeshsiriwardana, brionmario, dilusha-madushan

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: fixing inline code pill rendering when content wraps across lines.
Description check	✅ Passed	The description includes the purpose, implementation approach, related issue, checklist, and security checks. The optional breaking-changes section is not required because this change is not breaking.
Linked Issues check	✅ Passed	The CSS change directly addresses issue #5235 by making wrapped inline code fragments render with complete borders, backgrounds, radii, and padding.
Out of Scope Changes check	✅ Passed	The pull request changes only the targeted inline code CSS rule. The change is directly related to issue #5235 and contains no unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

docs/src/css/custom.css

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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