[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

MUI-Twitch.Issue.mp4

Before: https://mui.com/material-ui/customization/color/#playground

After: https://deploy-preview-43671--material-ui.netlify.app/material-ui/customization/color/#playground

[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 🚫 dangerJS against dd0ae07

[ZeeshanTamboli]

Hey @Nashyn , thanks for the pull request. It's the same as #42119. Can you answer my question which I asked in #42119 (review)?

[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.

[ZeeshanTamboli]

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.

Thanks for pointing that out. How about we just set a minimum width to prevent it from shifting:

--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -237,7 +237,7 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <Typography>{shades[intentShade]}</Typography>
+          <Typography minWidth={40}>{shades[intentShade]}</Typography>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {

[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.