[bpamiri]

Summary

At phone width, a long inline <code> span overflowed the .prose column and made the whole page scroll sideways by about 26-30px. An example is application.wheels.protectedControllerMethods in a paragraph. This adds one rule to web/packages/ui/src/styles/base.css:

.prose :not(pre) > code { overflow-wrap: anywhere; }

Inline code now breaks inside the column. Fenced blocks (pre > code) are excluded, so they keep white-space: pre and scroll horizontally inside their own box. No other code styling changes.

Fixes #4609

Testing (blog build)

• 390px and 1280px: no page-level horizontal scroll on routing-resources (previously 26px) or seven other code-heavy posts.
• Fenced code blocks: still scroll; no wrapping inside pre.
• Inline code that fits: unchanged; only over-long tokens wrap.
• Table cells: inline code now wraps too, so code-heavy markdown tables fit a phone screen. A long token can break mid-word there; that's readable, and better than the page scrolling.

Starlight (guides, api) has its own inline-code rule; the matching change is tracked in #4608.

🤖 Generated with Claude Code