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] Fix truncated TOCs scrollbar #37770

Merged
merged 1 commit into from
Jul 3, 2023

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jun 30, 2023

This is mostly noticeable on Windows, the truncated scrollbar feels confusing.

It feels like the scroll isn't at the top, so there is more things to scroll up to that his hidden, but once you try to scroll up, you realize that no, you are already at the top 🙈

Before:

Screenshot 2023-07-01 at 01 32 51

https://mui.com/joy-ui/react-checkbox/

After:

Screenshot 2023-07-01 at 01 33 14

https://deploy-preview-37770--material-ui.netlify.app/joy-ui/react-checkbox/

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work scope: docs-infra Specific to the docs-infra product labels Jun 30, 2023
@oliviertassinari oliviertassinari force-pushed the docs-scrollbar-v2 branch 2 times, most recently from 14131a6 to 74ae4d4 Compare June 30, 2023 23:34
@oliviertassinari oliviertassinari requested review from alexfauquette and removed request for siriwatknp June 30, 2023 23:34
@mui-bot
Copy link

mui-bot commented Jun 30, 2023

Netlify deploy preview

https://deploy-preview-37770--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 97c7cd3

@oliviertassinari oliviertassinari added the design This is about UI or UX design, please involve a designer label Jul 1, 2023
@@ -11,7 +11,7 @@ tags: ['Company']

### Image

<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" style="aspect-ratio: 4/3;" loading="lazy" />
<img alt="Satellite image of Tenerife" src="/static/blog/2022-tenerife-retreat/tenerife.jpeg" width="2560" height="1920" loading="lazy" />
Copy link
Member Author

@oliviertassinari oliviertassinari Jul 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to the other changes, but a quick win. This page is supposed to be the standard reference, here is the standard reference to how to include images, but this was outdated. Using the real width and height fixes the layout shift.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants