Skip to content

[docs-infra] Reserve space for scrollbar#40749

Merged
oliviertassinari merged 1 commit into
mui:masterfrom
oliviertassinari:reserve-scrollbar
Jan 23, 2024
Merged

[docs-infra] Reserve space for scrollbar#40749
oliviertassinari merged 1 commit into
mui:masterfrom
oliviertassinari:reserve-scrollbar

Conversation

@oliviertassinari

Copy link
Copy Markdown
Member

Before, layout shift on page transiton

Screen.Recording.2024-01-23.at.01.38.17.mov

After, stable layout

Screen.Recording.2024-01-23.at.01.37.56.mov

I opened mui/base-ui#79 for what a better solution for this would be (it's annoying to see the scrollbar). This PR relies on a fix I introduced while back to support #17812 (comment)

@oliviertassinari oliviertassinari added scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: bug It doesn't behave as expected. design This is about UI or UX design, please involve a designer. labels Jan 23, 2024
@mui-bot

mui-bot commented Jan 23, 2024

Copy link
Copy Markdown

@zannager
zannager requested a review from zanivan January 23, 2024 14:06
@zanivan

zanivan commented Jan 23, 2024

Copy link
Copy Markdown
Collaborator

What resolution are you using? I couldn't reproduce the layout shift here 🤔

Screen.Recording.2024-01-23.at.12.59.44.mov

@oliviertassinari

Copy link
Copy Markdown
Member Author

@zanivan You need a large enough screen to move from one page without a scrollbar to another with a scrollbar.

@zanivan zanivan left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

You need a large enough screen to move from one page without a scrollbar to another with a scrollbar.

It's really weird because there is clearly a layout shift in your video, but I couldn't reproduce it here in any way 😅

Tried to do so in the largest screen I have:

Screen.Recording.2024-01-23.at.19.11.46.mov

Anyway, I don't see any problem with adding this fix 👍

@oliviertassinari

Copy link
Copy Markdown
Member Author

It's really weird because there is clearly a layout shift in your video, but I couldn't reproduce it here in any way 😅

@zanivan Ah yes, it's because this https://www.notion.so/mui-org/Laptop-configuration-d306ca6120004d2e9034144e71c45b34?pvs=4#2bd404c6337443a0870ba1238293a457

@oliviertassinari
oliviertassinari merged commit 0b8594f into mui:master Jan 23, 2024
@oliviertassinari
oliviertassinari deleted the reserve-scrollbar branch January 23, 2024 22:59
@oliviertassinari oliviertassinari changed the title [docs-infra] Avoid layout shift on docs-pages [docs-infra] Reserve space for scrollbar Feb 12, 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 Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants