[docs] Fix palette pages - live edit not working

[oliviertassinari]

Preview: https://deploy-preview-38195--material-ui.netlify.app/material-ui/customization/palette/

A quick follow-up on #37743, this is a great step forward (will change with MD3) but I was so confused coming from https://twitter.com/DiegoAndaiC/status/1683865879677739008 and trying to edit the demos with no effect:

Screen.Recording.2023-07-28.at.00.57.36.mov

---

I did side fixes at the same time:

1. I have added a note in the a11y section for https://mui.com/material-ui/customization/palette/#contrast-threshold

contrastThreshold makes the color contrast much worse in this case: https://contrast.tools/?tab=apca&text=ffffff&background=ed6d03 vs. https://contrast.tools/?tab=apca&text=1C2026&background=ed6d03.

2. I fixed the ad link color. "Get started" is barely visible.

3. I fixed the scrollbar on mobile https://mui.com/material-ui/customization/palette/

[mui-bot]

Netlify deploy preview

• docs/data/base/components/select/select.md
• docs/data/joy/components/card/card.md
• docs/data/joy/customization/approaches/approaches.md
• docs/data/material/components/popover/popover.md
• docs/data/material/customization/how-to-customize/how-to-customize.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a9005cd

[DiegoAndai]

Thanks for catching this and jumping on it @oliviertassinari 😊

I agree with the changes, just have a couple of minor questions.

A general comment is that I didn't know about live editing since a couple of weeks ago when I saw you use it 😅 Maybe we could change the tooltip from "Show source code" to "Show live example"? 🤔

[oliviertassinari]

A general comment is that I didn't know about live editing since a couple of weeks ago when I saw you use it 😅 Maybe we could change the tooltip from "Show source code" to "Show live example"? 🤔

I think "Show source code" is still what most people want to use this expand button for. So while the live example is new, I think we would need to find another affordance path.

[DiegoAndai]

@oliviertassinari true, maybe there's another way we can make it more noticeable that the code is editable

[oliviertassinari]

React Bootstrap shows some sort of a popup, could be an idea.