Wrapping of text (prototype properties/methods etc) in the left navigation panel

[its4zahoor]

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

The left panel is wrapping text for lengthy properties or method names, the issue is not limited to the above URL only.

[schalkneethling]

@its4zahoor Do you feel that this is still a problem? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

[tannerdolby]

@schalkneethling I reckon this is ready to be closed. Its related to #1721 in some ways but unless anyone else points out a problem with the wrapping of text I think this ready for closing.

[its4zahoor]

@schalkneethling yes, I see it even now (2nd image). I have a 1366 x 766 Screen Resolution. I can see enough space on the left and right to fit content into one line, The icons also have padding thus where there are two or more icons then it also wraps. One more thing, even with the two icons and spaces on the right side the below could easily fit in one line but it wraps, needs some tweaks.

Attaching the full screen view in developer tools,

[tannerdolby]

One more thing, even with the two icons and spaces on the right side the below could easily fit in one line but it wraps, needs some tweaks.

@its4zahoor I don't think there are any "issues" with the text wrapping to the next line when it overflows the block formatting context. If the design didn't break words and insert a line break where content would otherwise overflow that would look odd. If you can help me better understand why having the text wrap is undesirable or provide an alternative solution, I'm all ears!

I think the current design/implementation works well and doesn't need to be changed because the line breaks being inserted when the <a> text would otherwise overflow is sort of necessary to be able to view the content for long lines.

[schalkneethling]

I would also appreciate any feedback on how sidebars could be made better. We are embarking on a redesign and a large part of it will touch the sidebars so, while we won't change anything right now(unless it is broken of course 😄 ), feedback and suggestions are very welcome. Thank you, @tannerdolby, and @its4zahoor

[its4zahoor]

@tannerdolby I had something like this in mind. No indentation under the heading and a bigger heading (see Method and .toSource).

@schalkneethling to improve sidebars, A better and clean UX is to trim prefixes and turn them into a heading. e.g String.prototype can become a heading and then list the properties below that. I think the old docs had something similar.

[schalkneethling]

Here is a discussion thread we started around the sidebars and redesign - https://github.com/mdn/yari/discussions/4033

[tannerdolby]

@tannerdolby I had something like this in mind. No indentation under the heading and a bigger heading (see Method and .toSource).

Nice idea, that seems promising! Feel free to continue this discussion around sidebar redesign in the discussion thread mentioned in the comment above.

[mirunacurtean]

Update: Wrapping is generally better but there are instance where the last part of the text gets cut off: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Note: this also depends on the browser. I compared 1600x1200 with 1536 × 731 on FF and Chrome. In FF the text wrapping works while on Chrome it doesn't.

FF - 1536 × 731

Chrome - 1536 × 731

UPDATE: Examples

1. sidebar items getting cut off or overflowing https://developer.mozilla.org/en-US/docs/Web/API/Attribution_Reporting_API https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API

2. spreading into syllables is done incorrectly https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model Good example: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

[caugner]

Most of the mentioned examples seem to be fixed, so let's close this as resolved.