[material-ui] [Stepper] Connecting line issues when label is a long string
Open
@DiegoAndai is already working on this.
Since Aug 26, 2024.
customization: css
scope: stepper
support: question
waiting for 👍
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.