Sidebar text can overlap content

[ghost]

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

What information was incorrect, unhelpful, or incomplete?

Methods on the left are overlapping with the content in the middle of the page. It makes it difficult to read through this page.

Specific section or headline?

What did you expect to see?

I expected to see a clear separation between the main content and the menu on the left.

Did you test this? If so, how?

I tried to alter the zoom percentage but it didn't make a difference.

MDN Content page report details

• Folder: en-us/web/javascript/reference/global_objects/array/reduce
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/global_objects/array/reduce/index.md
• Last commit: mdn/content@260094b
• Document last modified: 2021-08-16T05:07:13.000Z

[himanshugarg]

Thanks @najmieh . Would you like to include a screenshot in your report, as I don't see any overlapping content anywhere on the page

---

Edit: updated image to match provided. Apparently the sidebar items don't wrap for the OP's browser.

[ghost]

Yes sure. here it is:

[teoli2003]

This is controlled by yari. @escattone, can you transfer the issue? Thanks!

[KartikSoneji]

Firefox seems to have a strange line-wrapping algorithm, where it breaks a word early and fills the next line.
In fact, there should be no line-wrapping according to the CSS:

yari/client/src/document/organisms/sidebar/index.scss

Line 42 in 9c98e2c

word-wrap: normal;

Most of the longer titles in the sidebar can be naturally broken on the dot (.), so it might be worth inserting <wbr> tags instead of relying on different browser's line-wrapping algorithms.
They would have to be inserted during the server-side rendering of the markup (here).
Something like:

Array.from($("code"))
  .map(e => $(e))
  .forEach(e => e.html(e.html().replace(/\./g, "<wbr>.")))

Before:

After:

[ddbeck]

I think mdn/content#9612 is the same issue as this one. There's some additional detail and screenshots there, if needed.

[schalkneethling]

@teoli2003 Can you have a look and see if this is still a problem with the new design? Thanks!

[teoli2003]

So the overlapping is not happening anymore (but I think it was before the redesign).
The comment about MDN not breaking at the dot, but before is still valid. I don't know if you wanted to change this with the redesign or not. Anyway, the original report (left sidebar overlapping text) is fixed.

[schalkneethling]

So the overlapping is not happening anymore (but I think it was before the redesign). The comment about MDN not breaking at the dot, but before is still valid. I don't know if you wanted to change this with the redesign or not. Anyway, the original report (left sidebar overlapping text) is fixed.

Thank you for getting back to me @teoli2003. There is a PR to address the new issue you mentioned. I will close this one as the specific issue mentioned here is no resolved.