Stepper vertical line detaches when label wraps over multiple lines? - reactjs

Question

The text inside my MaterialUI Stepper // StepLabel sometimes wraps over multiple lines.
I need to keep the vertical StepConnectors attached the StepIcons regardless of the number of lines of text in the label.
I've tried other solutions such as using CSS pseudo tags, but I hit a wall every time I try to work those changes into our existing solution.
Massive thanks in advance to anyone who can help.
Sandbox
https://codesandbox.io/s/practical-chebyshev-4hktl?file=/src/App.js
Current Screenshot
Existing ThemeOptions
import {
ThemeOptions,
createTheme,
ThemeProvider,
CssBaseline
} from "#material-ui/core";
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepper: {
root: {
backgroundColor: "transparent" // remove set background
}
},
MuiStepConnector: {
vertical: {
padding: 0,
width: 5,
marginLeft: 8 // half icon
},
lineVertical: {
top: "calc(-50%)",
bottom: "calc(50%)",
borderLeftWidth: "2px",
marginLeft: "-1px", // center (1/2 width)
marginTop: "-6px", // add -ve margin to top and bottom ...
marginBottom: "-6px", // ... to hide gap due to smaller icon
borderColor: "lightgrey",
"$active &, $completed &": {
borderLeftWidth: "4px",
marginLeft: "-2px",
borderColor: "blue"
}
}
},
MuiStepLabel: {
label: {
textAlign: "left",
fontSize: "1.25rem",
"&$active": {
fontWeight: 400
},
"&$completed": {
fontWeight: 400
}
},
iconContainer: {
paddingRight: 12
}
},
MuiStepIcon: {
root: {
display: "block",
fontSize: "1rem",
color: "lightgrey",
"&$completed": {
color: "blue"
},
"&$active": {
color: "blue"
}
}
}
}
};

Answer 1

Just in case anyone finds this in the future, we compromised on the ​implementation to deliver the task.
Instead of having a variable height on the MuiStepLabel, it was given a fixed height to keep the StepIcons the same distance apart. If you imagine the below screenshot with a different font size + spacing, it ended up looking OK, but not ideal.
Before
// src/Theme/index.tsx
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepConnector: {
marginTop: "-6px",
marginBottom: "-6px",
}
MuiStepLabel: {}
}
}
After
// src/Theme/index.tsx
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepConnector: {
marginTop: "-2px",
marginBottom: "-4px",
minHeight: "calc(24px + 0.5rem)",
},
MuiStepLabel: {
height: "1.25rem",
lineHeight: "1.25rem",
}
}
}
Sandbox
https://codesandbox.io/s/epic-bohr-0p7fj?file=/src/Theme/index.ts