Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
its4zahoor opened this issue Dec 15, 2020 · 9 comments
Labels
🧑‍🤝‍🧑 community contributions by our wonderful community frontend general frontend issues 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. idle involves: UX Requires the attention of the UX team. p3 We don't have visibility when this will be addressed.

Comments

@its4zahoor
Copy link

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.

image

image

@peterbe peterbe transferred this issue from mdn/content Dec 18, 2020
@schalkneethling schalkneethling added the involves: UX Requires the attention of the UX team. label Jan 11, 2021
@schalkneethling schalkneethling added the p3 We don't have visibility when this will be addressed. label Jan 11, 2021
@schalkneethling
Copy link

@schalkneethling schalkneethling added frontend general frontend issues and removed design system labels Mar 31, 2021
@tannerdolby
Copy link
Contributor

@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
Copy link
Author

its4zahoor commented Jun 15, 2021

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

image

image

Attaching the full screen view in developer tools,
image

@tannerdolby
Copy link
Contributor

tannerdolby commented Jun 15, 2021

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
Copy link

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
Copy link
Author

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

@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
Copy link

Here is a discussion thread we started around the sidebars and redesign - #4033

@tannerdolby
Copy link
Contributor

tannerdolby commented Jun 15, 2021

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

@github-actions github-actions bot added the 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. label Nov 25, 2021
@schalkneethling schalkneethling added the 🧑‍🤝‍🧑 community contributions by our wonderful community label Apr 15, 2022
@github-actions github-actions bot added the idle label Dec 21, 2022
@mirunacurtean
Copy link

mirunacurtean commented Jul 19, 2024

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
image

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
image

Chrome - 1536 × 731
image

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

image

@github-actions github-actions bot removed the idle label Jul 19, 2024
@github-actions github-actions bot added the idle label Sep 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧑‍🤝‍🧑 community contributions by our wonderful community frontend general frontend issues 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. idle involves: UX Requires the attention of the UX team. p3 We don't have visibility when this will be addressed.
Projects
Development

No branches or pull requests

5 participants