StepButton of non-linear horizontal Stepper protrudes into content

[PutziSan]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Button ends where content starts. (see sandbox)

Current Behavior

Button overflows

Steps to Reproduce (for bugs)

https://codesandbox.io/s/p9nkwkyynq (press the buttons in the left stepper, the ripple-effect protrudes into the content)

Your Environment

see sandbox

I added a workaround-example in the sandbox to get the my expected behavior for now.

[eps1lon]

Recommended workaround using themes:

const theme = createMuiTheme({
  overrides: {
    MuiStepButton: {
      // remove the faulty spacing
      root: {
        margin: null,
        padding: null,
      },
      // which should only apply to `horizontal`
      horizontal: {
        padding: '24px 16px',
        margin: '-24px -16px',
      },
      // and be a bit more conservative with the spacing for `vertical`
      vertical: {
        padding: 8,
      },
    },
  },
});

We're trying to figure out if we can apply the fix to the core component but we risk breaking changes for other customizations.

[oliviertassinari]

@PutziSan It seems that we could fix the problem with:

diff --git a/packages/material-ui/src/StepButton/StepButton.js b/packages/material-ui/src/StepButton/StepButton.js
index 7572b0bb2..dd898896b 100644
--- a/packages/material-ui/src/StepButton/StepButton.js
+++ b/packages/material-ui/src/StepButton/StepButton.js
@@ -19,6 +19,8 @@ export const styles = {
   /* Styles applied to the root element if `orientation="vertical"`. */
   vertical: {
     justifyContent: 'flex-start',
+    padding: '8px',
+    margin: '-8px',
   },
   /* Styles applied to the `ButtonBase` touch-ripple. */
   touchRipple: {

https://codesandbox.io/s/material-demo-im6qj