[material-ui] [Stepper] Connecting line issues when label is a long string

[SCjona]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-cemc8z?file=Demo.tsx

Resize the preview to a small mobile size

Current behavior

Expected behavior

• The first connecting line does not clip into the first step button
• The connecting line after step 2 has some more spacing
• The connecting line after step 3 starts sooner

Basically that it looks like if it was on desktop, just with shorter lines/more compressed.

Context

I'm trying to use the stepper with horizontal scrolling, which works fine, just causes these visual artifacts

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.7.0 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Chromium: 130.0.6677.0 <-- used
    Edge: Not Found
    Safari: 17.6 <-- used
    Firefox: 129.0.2 <-- used

Search keywords: stepper, alternativeLabel, lines