Issue with "BigInt": Left sidebar blends with text

MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

What information was incorrect, unhelpful, or incomplete?

The left sidebar clips with the actual text and makes it hard to read.

Specific section or headline?

Most noticeable near the Operators heading.

What did you expect to see?

Sidebar separated by whitespace

Did you test this? If so, how?

N/A

MDN Content page report details

• Folder: en-us/web/javascript/reference/global_objects/bigint
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/global_objects/bigint/index.md
• Last commit: https://github.com/mdn/content/commit/05a80e13f9824c8733ed293c5f22e322248096ef
• Document last modified: 2021-12-03T05:27:53.000Z

[AnilSeervi]

Yes. Code blocks by default have that(word-wrap: break-word) style.

That does work, but not as good as it does in firefox.

Edit: found similar issue in mdn/yari#4635

The simple solution here would be to remove the word-wrap property on .sidebar code.

[AnilSeervi]

It looks fine on firefox(wrapping the text to next line at-word). Issue seems to be with chromium browsers.

It’s because the text is within the code block and chromium browsers for some reason arent able to figure out where to wrap text within <code>.