Wrap long tokens and bare URLs in the docs chrome body

What does this MR do and why?

I want docs pages to fit a phone, because an unlinked URL in a paragraph, list item, blockquote or pattern row widens the page as one unbreakable word. Links and inline code already break; main.page now sets overflow-wrap: break-word. It leaves min-content sizes alone, so table columns keep their widths. anywhere on li, p missed pattern rows and broke URLs mid-cell.

References

None.

Standards affected

None.

Exemption implications

None. A pinned consumer sees nothing until it repins.

Test plan

  • just guard, just validate, just check (21 passed), just build, just agent and lightningcss pass.
  • A scratch page with a 40-character code token and a 90-character URL in a list, a paragraph and a callout, plus the token in a table cell: 733px wide at 390 and 882px at 721, now fitting at all three widths.
  • This site's 61 pages and the template's 9 fit at 390, 721 and 1440, before and after.
  • All 27 tables at 1440 keep their column widths; the widest stays 205.8 and 842.2px.
  • Not tested: Safari, Firefox, a screen reader.
  • Unchanged: above 720px, a table cell holding an unbreakable URL still widens the page, before and after this change; tables scroll in their own box only at 720 and below.

An AI tool wrote this change and ran the checks above.

Merge request reports

Loading
Loading