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

[docs-infra] Double vertical scrollbars #38710

Open
sangauit opened this issue Aug 29, 2023 · 18 comments
Open

[docs-infra] Double vertical scrollbars #38710

sangauit opened this issue Aug 29, 2023 · 18 comments
Labels
design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product

Comments

@sangauit
Copy link

sangauit commented Aug 29, 2023

Related page

Kind of issue

Other

Issue description

Double vertical scrollbars

Context 🔦

Going to any pages under Components sections on Joy page

I use Edge Version 116.0.1938.54 on linux-x64, the same with Firefox 116.0.3 on linux-x64
Docs version: v5.0.0-beta.4

@sangauit sangauit added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Aug 29, 2023
@brijeshb42

This comment was marked as resolved.

@brijeshb42 brijeshb42 added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 29, 2023
@sangauit
Copy link
Author

You can go to the attached link and the issue will occur, no need video, btw see the attached file
Screenshot from 2023-08-29 21-27-22

@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Aug 29, 2023
@danilo-leal danilo-leal added docs Improvements or additions to the documentation component: autocomplete This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy and removed support: docs-feedback Feedback from documentation page component: autocomplete This is the name of the generic UI component, not the React module! labels Aug 29, 2023
@danilo-leal
Copy link
Contributor

Hey @sang-au! Are you referring to these scrollbars? Or is it something else? Want to understand if it's something Autocomplete-related, given that was the page you linked, but I'm sensing it's not.

Screen Shot 2023-08-29 at 13 40 28

@brijeshb42
Copy link
Contributor

brijeshb42 commented Aug 29, 2023

This is expected since content is more than the available area. On MacOS, it's not an issue because scrollbars are hidden by default.
Maybe there might be a similar setting at OS level to hide scrollbars by default in your OS.

cc: @danilo-leal

@danilo-leal
Copy link
Contributor

Yup, I'm aware! Wanted to see if that's really what they're referring to because if it is, it's just the docs scrollbars ⎯ not a bug/problem (and not Joy UI-related, too).

@sangauit
Copy link
Author

As the topic. It related to docs and base on the context go to any page under components section. It related to docs only.

@sangauit
Copy link
Author

I did not see this issue on previous version

@danilo-leal
Copy link
Contributor

@sang-au would you mind clarifying it a bit more? I'm still a bit unsure what you're referring to 😬

@sangauit
Copy link
Author

Just the issue on the doc page, that show 2 vertical scrollbar on the right side, not related to any component!

@danilo-leal
Copy link
Contributor

danilo-leal commented Aug 30, 2023

@sang-au Got it! Thanks for the clarification! As we mentioned above, I don't think that's a bug/problem ⎯ the two scrollbars are there because one is for the table of contents & the other is for the entire page. Is that getting in your way somehow, causing navigation experience issues?

One tentative solution would be for you to hide the scrollbar at the OS level (happens automatically on MacOS). Let us know if you have any other suggestions, too. Otherwise, I think we can close the issue!

@danilo-leal danilo-leal changed the title [joy-ui][docs] Double vertical scrollbars [docs-infra] Double vertical scrollbars Aug 30, 2023
@danilo-leal danilo-leal added scope: docs-infra Specific to the docs-infra product and removed docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy labels Aug 30, 2023
@sangauit
Copy link
Author

sangauit commented Aug 30, 2023

I agree that is not a bug. However, an issue like that should not occur on the UI library's docs page like MUI, LOL.

@danilo-leal
Copy link
Contributor

I see... my point is: is it an issue? I don't think the table of contents scroll should be tied to the entire page scroll ⎯ having a scrollbar allows you to scroll it independently from the page. If you were expecting just one scrollbar, that would mean that you'd need to go to the bottom of the page to see more TOC content, which is not a great experience. Does that make sense? Were you expecting something else?

@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation and removed scope: docs-infra Specific to the docs-infra product labels Sep 1, 2023
@oliviertassinari oliviertassinari changed the title [docs-infra] Double vertical scrollbars [Autocomplete] Split docs page into multiple pages Sep 1, 2023
@oliviertassinari oliviertassinari changed the title [Autocomplete] Split docs page into multiple pages [Autocomplete][docs] Split docs into multiple pages Sep 1, 2023
@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! scope: docs-infra Specific to the docs-infra product and removed component: autocomplete This is the name of the generic UI component, not the React module! labels Sep 1, 2023
@oliviertassinari oliviertassinari changed the title [Autocomplete][docs] Split docs into multiple pages [docs-infra] Double vertical scrollbars Sep 1, 2023
@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 1, 2023

Ideas:

  1. We could make the table of contents items a bit denser, there is maybe too much gap between each item.
  2. We could make the table of contents scroll container behave like on macOS: Add custom Scrollbar component mui-x#510, e.g. https://www.radix-ui.com/primitives/docs/components/dialog
Screen.Recording.2023-09-11.at.18.06.49.mov
  1. We could split the Autocomplete docs page into more pages in Base UI, and move more content away from Joy UI & Material UI to Base UI: [docs] Document headless Multiple values Autocomplete in Base UI base-ui#20.
  2. We could move the sponsors back to the main side nav. [docs-infra] Diamond sponsors docs layout #38033 (comment) using less space in the tocs.

@samuelsycamore
Copy link
Contributor

I'm not sure there's any way to work around this on pages that are especially long. (And do we really need to?) Ideally we'd be able to either a) extract some content from one page to create a new one, or b) revise the content on the page to include fewer headers. In the case of the Autocomplete component doc, for example, I don't think either of these is an option. Tighter density might help some pages, but there could still be double scrollbars on especially long pages.

@samuelsycamore samuelsycamore added component: autocomplete This is the name of the generic UI component, not the React module! and removed component: autocomplete This is the name of the generic UI component, not the React module! labels Sep 11, 2023
@danilo-leal
Copy link
Contributor

Yup, agreed! Making sure content is well distributed and organized is always positive, and we should do so, but unless the second option there ("...behave like macOS") does do something to the scrollbar (saying that because it's not clear to me what behaving like macOS in this context means exactly), I don't think we'll be able to avoid it. At the end of the day, not sure if it's a problem at all 😬

@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 11, 2023

saying that because it's not clear to me what behaving like macOS in this context means exactly

@danilo-leal illustration added #38710 (comment).

@mbrookes
Copy link
Member

mbrookes commented Oct 3, 2023

We could make the table of contents scroll container behave like on macOS

Pedantically, not quite like macOS in the Radix example, as the scrollbar appears on hover, not on scroll, but that seems like a valuable affordance in this instance.

@danilo-leal danilo-leal removed docs Improvements or additions to the documentation component: autocomplete This is the name of the generic UI component, not the React module! labels Oct 3, 2023
@danilo-leal danilo-leal moved this to Todo in Docs-infra Oct 20, 2023
@auvansang
Copy link

Today I see the docs on https://material-web.dev/components/button/
so MUI can apply some thing like bellow
image

@oliviertassinari oliviertassinari added the design This is about UI or UX design, please involve a designer label Feb 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product
Projects
Status: Backlog
Development

No branches or pull requests

7 participants