[material-ui][docs] Add TemplateFrame to templates

[zanivan]

• I have followed (at least) the PR section of the contributing guide.

Follow-up to #43396 based on #43396 (comment)

Fixes the layout and double scrollbars.

👉 https://deploy-preview-43406--material-ui.netlify.app/material-ui/getting-started/templates/

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 99e2ca2

[aarongarciah]

Nice! The changes are causing a double scroll bars in the marketing page and blog templates:

btw, we should probably set the color-scheme CSS property so all scroll bars have the same color. In another PR ofc!

[zanivan]

@aarongarciah what browser are you using? Tested on chrome here and couldn't reproduce it

[aarongarciah]

@zanivan I'm seeing it in at least Chrome, Safari and Arc (which is basically Chrome) in macOS with scroll bars always visible. Firefox seems to be the only one not doing the double scroll.

https://deploy-preview-43406--material-ui.netlify.app/material-ui/getting-started/templates/marketing-page

[zanivan]

I was recording a video to show that here it's not happening and a bugger bug showed up 😅 Do you have any idea on what might be happening?

Screen.Recording.2024-08-23.at.12.45.23.mov

[aarongarciah]

I'll take a look next week 👀 To see the double scroll bar, you need to update this macOS setting to "Always":

[aarongarciah]

@zanivan I need to look deeper but removing the footer fixes the double scroll bar and the issue you shared in the video (is the same issue).

[aarongarciah]

Just found the culprit: the hidden label in the email input in the footer, which is absolute positioned, is causing the overflow.

Kapture.2024-08-23.at.18.46.32.mp4

[aarongarciah]

Nice! Left a couple of small comments for your consideration.