Horizontal overflow on mobile viewports for inline code snippets

[blaqshyd]

Describe the problem

On mobile viewports, long code identifiers (specifically in the "Breaking changes" section) do not wrap, causing a significant horizontal overflow. This breaks the page layout and forces users to scroll horizontally to read technical names.

The issue is most prominent on mobile (344px–414px) as the white-space: nowrap rule on inline code elements prevents the text from adapting to the available container width.

Steps to Reproduce

1. Using a mobile device (or browser dev tools set to a mobile viewport, e.g., iPhone 12 Pro).
2. Navigate to a breaking change page with long method names, such as:

• Deprecate findChildIndexCallback in favor of findItemIndexCallback...
• Deprecate containsSemantics in favor of isSemantics

3. Observe that the code styled text overflows the container.

Expected fix

The main code and main kbd elements should be updated in the global SCSS (src/_sass/_base.scss or equivalent) to allow for fluid wrapping. Removing the nowrap restriction ensures the UI remains responsive across all devices without needing extra media queries.

On which browser(s) did you experience this issue?

Chrome

Additional context

I have tested this fix across multiple simulated viewports including:

• iPhone 12 Pro (390px)

• iPhone XR (414px)

• Galaxy Z Fold 5 (344px)

• Desktop (1212px with sidebar)

Before	After

I would like to fix this problem.

• I will try and fix this problem on docs.flutter.dev.