[Wizard]: Stacked Wizard Steps not aligned properly

[Neeeko]

Describe the bug

It's not extremely visible (although it's there) in the sample, but more visible in our application.

In smaller screens, the Stacked (or non selected) steps are not properly horizontally aligned with the other steps numbers.

In the following example, here's how it looks like with a screen width of about 450px:
https://stackblitz.com/edit/github-rhfduk?file=src%2FApp.tsx

Here's how it looks like in our application. It's way more visible.

I was unable to reproduce this issue in ui5-webcomponents playground.

Isolated Example

https://stackblitz.com/edit/github-rhfduk?file=src%2FApp.tsx

Reproduction steps

1. Go to https://stackblitz.com/edit/github-rhfduk?file=src%2FApp.tsx
2. Reduce the screen width to around 450px
3. Go to step 4
4. Notice the alignment issue

Expected Behaviour

All step numbers should be properly aligned.

Screenshots or Videos

No response

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SuccessFactors

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @Neeeko

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi colleagues,

the Wizard steps are misaligned in some cases. I wasn't able to reproduce the hard misalignment as shown in the 3rd screenshot, but it's there. It's probably related to WizardSteps with a two line title, rendered in the same line as steps with only a one line title.

Here you can find an example using only ui5wc without our wrapper or React. Please note that I've added red lines above and below each step to visualize the issue better, if you want to remove the lines just remove addCustomCSS.

https://stackblitz.com/edit/github-xieya7?file=index.html,main.js,package.json

[elenastoyanovaa]

Hello @SAP/ui5-webcomponents-topic-rl ,

Could you please take a look of this alignment issue of the ui5-wizard navigation area?

Kind Regards,
Elena

[Neeeko]

Hi, any update on this ticket? This misalignment is quite visible in our project. Thanks!

[ui5-webcomponents-bot]

🎉 This issue has been resolved in version v2.5.0-rc.2 🎉

The release is available on v2.5.0-rc.2

Your semantic-release bot 📦🚀