[website] Make the showcase component of hero on landing page scrollable

[LorenzHenk]

The top right section of the landing page is cut off and cannot be scrolled, making it impossible to see some of the cool examples.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The height is based on the screen height (calc(100vh - 120px)). Overflowing content is hidden.

Note that e.g. the "Use the sx prop to add these properties" example is not fully visible.

Expected Behavior 🤔

IMO the best way to handle this is by making the section scrollable.

Steps to Reproduce 🕹

Steps:

1. Go to https://mui.com/

Context 🔦

I noticed that the "Use the sx prop to add these properties" example was cut off.

Your Environment 🌎

24" screen in landscape orientation 😄

[hbjORbj]

@LorenzHenk Thanks for the report. Yes, I agree that you can make the box scrollable. I suggest the following. Would you like to create a PR for this?

diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
index c1dfb40a4a..f2107c2592 100644
--- a/docs/src/components/home/Hero.tsx
+++ b/docs/src/components/home/Hero.tsx
@@ -123,6 +123,7 @@ export default function Hero() {
       rightSx={{
         p: 3,
         minWidth: 2000,
+        overflowY: 'auto',
         '& > div': {
           width: 360,
           display: 'inline-flex',

[ysstudio22]

Hi @hbjORbj

I'm Yoshi. I'm interested in contributing if this issue hasn't been assigned yet. I'll wait until @LorenzHenk has replied to you. Thanks🙂

[LorenzHenk]

Hey @hbjORbj!
Thanks, I would have liked to implement this, but it seems like someone was already faster (#29141) 😁

[mbrookes]

Should we change it here too?

[ysstudio22]

@LorenzHenk I didn't mean to take it from you. It's your idea. 👍🏻

[siriwatknp]

cc @danilo-leal (At first I was thinking about parallax that section when scrolling down but no time to do it)

[mbrookes]

@hbjORbj : #29119 (comment) ?

[hbjORbj]

@mbrookes This was addressed in #29141. Check out #29141 (comment) :)

[oliviertassinari]

The top right section of the landing page is cut off and cannot be scrolled, making it impossible to see some of the cool examples.

Do we really want to fix this? I wouldn't, it introduced a regression: I can't see the scrollbar on https://mui.com/, and yet, when I try to scroll down the page (my cursor happens to be on the wrong side of the page), I can't. It's the hero container that scrolls.

[LorenzHenk]

You're right, after scrolling to the bottom of the hero section I need to stop scrolling for a second or move my cursor a bit and only after that scrolling affects the whole page. Tested with Firefox and Chrome.

2021-11-02.20-21-01.mp4

Do you have an alternative idea on how this could be handled? It'd still be a shame to not be able to view all the demos 😁