WRR-3137: Fixed `Panels.Header` to show title and subtitle properly in `WizardPanels`

[mmyelyn]

Checklist

• [X] I have read and understand the contribution guide
• [x] A CHANGELOG entry is included
• [ ] At least one test case is included for this feature or bug fix
• [X] Documentation was added or is not needed
• [ ] This is an API breaking change

Issue Resolved / Feature Added

When using WizardPanels, if the subtitles are long, they appear long for a moment and then shorten.

This is because the sizes of slotAfter and slotBefore are fixed after the subtitle is drawn. For centering of the title, the slot is measured after the element is drawn.

Resolution

I adjusted the timing of when the slot is fixed and when the subtitle and title are drawn. Specifically, I modified the subtitle and title to be drawn together when the slot is drawn.

Therefore, the phenomenon of the subtitle appearing long for a moment and then appearing short disappears.

Additional Considerations

Links

WRR-3137

Comments

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 81.60%. Comparing base (335a2c1) to head (866e467). Report is 3 commits behind head on develop.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## develop #1686 +/- ## ======================================== Coverage 81.60% 81.60% ======================================== Files 148 148 Lines 6675 6675 Branches 1986 1987 +1 ======================================== Hits 5447 5447 Misses 935 935 Partials 293 293 ``` | [Flag](https://app.codecov.io/gh/enactjs/sandstone/pull/1686/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=enactjs) | Coverage Δ | | |---|---|---| | [](https://app.codecov.io/gh/enactjs/sandstone/pull/1686/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=enactjs) | `81.60% <100.00%> (?)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=enactjs#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.