[DIALOG]: [Header and footer pushed away on dialog resize]

Describe the bug

When the dialog resizable property set true , header and footer of the dialog moved and pushed to right & left respectively. I am using initial dialog width - 680px for this dialog.

This issue is reproducible in UI5 playground or - https://sap.github.io/ui5-webcomponents/components/Dialog/.

Open Dialog

<ui5-dialog id="dialog" resizable="true" style="width:680px" header-text="Register Form">
    <section class="login-form">
        <div>
            <ui5-label for="username" required show-colon>Username</ui5-label>
            <ui5-input id="username"></ui5-input>
        </div>
    </section>
    <div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
        <div style="flex: 1;"></div>
        <ui5-button class="dialogCloser" design="Emphasized">Register</ui5-button>
    </div>
</ui5-dialog>

Isolated Example

This issue is reproducible in UI5 playground or - https://sap.github.io/ui5-webcomponents/components/Dialog/. Open Dialog

Reproduction steps

Create UI5 Dialog with resizable=true and set dialog width to 680px
after render on screen - try to resize dialog to smaller width
You will see both header n footer are moving and pushed inside. ...

Expected Behaviour

Header and footer should get back to there original place. The padding for header text should remain same from the left.

Screenshots or Videos

Image 1 -

Image 2 -

UI5 Web Components for React Version

1.29

UI5 Web Components Version

1.24

Browser

Chrome

Operating System

Mac

Additional Context

SAP - successfactor's - WEF Team -

Relevant log output

No response

Organization

SAP

Declaration

[X] I’m not disclosing any internal or sensitive information.

SAP / ui5-webcomponents-react

[DIALOG]: [Header and footer pushed away on dialog resize] #6285