Issue with "BigInt": Left sidebar blends with text

[PythonCoderAS]

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: mdn/content@05a80e1
• Document last modified: 2021-12-03T05:27:53.000Z

[Andrew-Cottrell]

I can reproduce using Chrome 96.0.4664.110 with the browser window sized such that

window.innerWidth === 1024; // true

In my opinion, the following improves the layout

.sidebar {
    overflow-x: hidden;
}

---

This issue occurs on every page that displays the Object prototype's methods in the sidebar, including the Object page, as the text "Object.prototype.propertyIsEnumerable()" is too wide to fit in the available space.

[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>.

[Andrew-Cottrell]

The following helps Chrome 96 and probably other Chromium browsers

.sidebar code {
    word-wrap: break-word;
}

[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 #4635

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

[schalkneethling]

Hey @PythonCoderAS, @Andrew-Cottrell, and @AnilSeervi. Thank you for raising this issue. It is indeed problematic. This is being addressed as part of the current redesign that is underway. As such, the work is tracked elsewhere. Closing this one to avoid duplication.