[website] Home page hero is overflowing with broswer zoom on 100%

[Itsamanjain]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1.Go to website https://mui.com/material-ui/
2. on home page right part of hero content is overflowing display on 100% zoom of browser .
3. found in chrome as well as brave

Current behavior 😯

Right part Hero content overflowing display on 100% zoom of browser.

Expected behavior 🤔

it should not overflow display on 100% zoom of browser .it is perfectly visible on 90% zoom of browser .

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[danilo-leal]

Hey @Itsamanjain, thanks for opening this issue! You mean overflowing as in not being able to see every component demo, right? If that's the case, I wouldn't say it's a problem ⎯ these hero section components are meant to be more illustrative than anything, so that container changes its size depending on the viewport size (regardless it is from resizing the window or zooming in and out).

Let me know if this suffice in order to close the issue!

[Z3rio]

Hey @Itsamanjain, thanks for opening this issue! You mean overflowing as in not being able to see every component demo, right? If that's the case, I wouldn't say it's a problem ⎯ these hero section components are meant to be more illustrative than anything, so that container changes its size depending on the viewport size (regardless it is from resizing the window or zooming in and out).

Let me know if this suffice in order to close the issue!

Yeah, that's how I understood the homepage as well.
I've always seen this section as just a cool/good-looking way of displaying some examples.
The fact that it overflows/goes outside of your screen in my opinion just makes it look better

(Assuming this issue refers to this section)

[danilo-leal]

Yup, that's it @Z3rio, I'm glad we're on the same page! 🙏 The confusion is understandable, though, particularly because these components are interactive, but they're there really just for illustration purposes!

[Z3rio]

Yup, that's it @Z3rio, I'm glad we're on the same page! 🙏 The confusion is understandable, though, particularly because these components are interactive, but they're there just for illustration purposes!

Perhaps something should be done to indicate that they are there as a decoration and not for them to be showcased/played around with (since there are better places for that).
(Whilst still keeping the old layout & style, since it looks fairly nice)

[aryanofficialjain]

@danilo-leal @Z3rio @Itsamanjain @jarib @alltom
check the website and zoom out to 80% then you see the component is overflow on the right side
this is not an illustration the all the hidden component are working

[Itsamanjain]

@danilo-leal @Z3rio
I am unable to set it up locally. Please help. I cloned the repository and followed all the steps, but when I attempt to run yarn install, it displays various errors. Specifically, the file C:\Users\dell\AppData\Roaming\npm\yarn.ps1 cannot be loaded due to script execution being disabled on this system.

[Z3rio]

@danilo-leal @Z3rio
I am unable to set it up locally. Please help. I cloned the repository and followed all the steps, but when I attempt to run yarn install, it displays various errors. Specifically, the file C:\Users\dell\AppData\Roaming\npm\yarn.ps1 cannot be loaded due to script execution being disabled on this system.

Sounds like an issue with yarn/npm.
Please take a look at and verify your installation of those.

[danilo-leal]

@aryanofficialjain still a bit confused with what you mean by "this is not an illustration the all the hidden component are working" 😕 Are you referring to the components on the right-side container of the hero section or else? If yes, then it's what we were talking about: although they are interactive, they're mostly there for illustration purposes.

@Z3rio it's a good call to do something! One thing I considered in the past is, as you interact, or hover over, each component, you'd see a tooltip saying something like "this is an example! Want to see how to customize the ... component like this? Visit the docs". The drawback is that it would cloud things a bit, I think. Open to suggestions!

[aryanofficialjain]

@danilo-leal i am sorry for my mistake thanks to guide me i thought that is it a issue but it wouldn't