Angular wizard buttons not placed at bottom of form, regression in 12.0.9

[prymo69]

Describe the bug

For clr-wizard in 12.0.9 and 12.0.10, buttons are placed directly below form instead of being locked vertically at the bottom of the form. When navigating between pages with forms of varying vertical height, the buttons move position impacting usability.

How to reproduce

1. For any clr-wizard create a page with some default buttons.
2. Observe buttons are not placed in bottom-right corner.

Using browser dev tools, the form content div now uses "modal-body-wrapper" whereas prior to 12.0.9 it was "modal-body". Manually changing the class on this div to "modal-body" resolves the issue. I believe this regression is a side-effect of this commit: https://github.com/vmware/clarity/pull/6561/commits/541c92707fe845b05bb42eb3f6cc9f6f1bc04e57

Only workaround found was to revert back to 12.0.8.

Expected behavior

Wizard buttons should be placed vertically at the bottom.

Versions

Clarity project:

• [ ] Clarity Core
• [x] Clarity Angular/UI

Clarity version:

• [ ] v3.x
• [ ] v4.x
• [x] v5.x

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 12.2.15

Device:

• Type: PC
• OS: Windows 10
• Browser: Chrome
• Version: 97.0.4692.99

Additional notes

[jtruffot]

I have the same problem with Clarity version 13.0.0. Adding this CSS rule works for me.

.clr-wizard .modal-body-wrapper {
  height: 100%;
  width: 100%;
}

[Jinnie]

reproducible on the website

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.