[docs][material-ui] Fix slider in color customization playground twitches when sliding

[Nashyn]

Hey, I have raised a PR that fixes a bug that I noticed in the color component in the docs where the slider twitches when between 400- 50 and henceforth I have a found a fix and updated it. Now the issue has been resolved.

Fixes #42019

https://github.com/user-attachments/assets/a5275841-5544-4117-aa1f-8ce530501dc2

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against dd0ae0738b03d33e2b77df64b8eece3a777b6a3f

[Nashyn]

Hey @ZeeshanTamboli , the issue was caused due to the Typography component dynamically resizing within the flex container, which was causing shifts when displaying the shade value. By wrapping it in a div with a fixed width, I ensured that it had a consistent space for the text, preventing shifts in the layout and stabilizing the slider. This resolved the issue by maintaing consistent alignment. Thank you.

[Nashyn]

Hey @ZeeshanTamboli , Thanks for the suggestion. Setting a minWidth on the Typography component is an effective solution and simplifies the implementation. It directly addresses the layout stability without needing additional elements. I have committed the changes. Thank you.

[ZeeshanTamboli]

@Nashyn Thanks for the pull request.