Stepper lines don't extend all the way when there is an expanded description

[jagged91]

What package has an issue

@mantine/core

Describe the bug

The Stepper component expects its children to be a certain height or width (i.e. 40px). When adding something more custom than just text to the the description or label fields, the lines on the stepper don't extend all the way to the other steps as expected.

In which browser did the problem occur

Chrome

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/hopeful-joana-dv1x69?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

This is probably a matter of ensuring the lines have a flexible height / width and scale with the children inside.

[rtivital]

@achmurali can you have a look at this?

[wes337]

I have created a solution for this. It's a bit clunky, but I can't see a way to do this with pure CSS.

The solution I created changes the position of the label to absolute, and will increase the height of the stepper wrapper based off the excess height of the label. It's a bit awkward to explain, but it actually works quite well:

Let me know if you'd like me to make a PR

[rtivital]

Nah, does not seem nice to do such a thing with JavaScript, it should be possible to do something like that with CSS, maybe we need to restructure component for that

[wes337]

Okay, I've found a way to do it just using CSS.

Is it okay if we pass the orientation prop to the Step component? Because the way I found to do this using CSS needs the separator to be in the Step component (right now it's in the Stepper in the items reduce function), and the styles of the separator change based on the orientation.

[rtivital]

it's fine to pass orientation from stepper component to step

[rtivital]

The issue is still relevant for 5.1.3, help wanted – https://codesandbox.io/s/smoosh-sound-tjcy5o?file=/src/App.tsx

[wes337]

The issue is still relevant for 5.1.3, help wanted – https://codesandbox.io/s/smoosh-sound-tjcy5o?file=/src/App.tsx

What was wrong with #1564?

I could try this one again, and take a new approach.

[rtivital]

There was a migration in 5.0 related to Stepper.Step rendering and previous styling logic did not work, so I had to modify it a little but forgot about this use case