code elements overflow their container at narrow widths

[BlueSlug]

Describe the bug

code elements overflow their container at narrow widths

To reproduce

Steps to reproduce the behavior:

1. Go to the Infusion 3.0 release news item: https://floeproject.org/news/2021-09-07-infusion-3-release/
2. Scroll down to the code elements on the page, under the heading "Framework"
3. See error

Expected behavior

code elements should not flow beyond their containers at any width.

Screenshots

Technical details

Desktop

• OS: Windows 10 Pro 20H2
• Browser: Chrome 96, Firefox 95

Smartphone / tablet

• Device: Pixel 5
• OS: Android 12
• Browser: Chrome 96

Assistive technology used

N/A

Additional context or notes

This is only visible in desktop environments with very narrow viewports, though it was observed on the Pixel 5 without any changes to the environment.

The solution will likely involve the use of a CSS property such as word-break or line-break. Ideally, the line break would come at typical delimiting symbols such as .