[dynamic-page] Alignment of the headerArea isn't fully responsive

[Neeeko]

Bug Description

In some screen range, the headerArea of the dynamic-page isn't properly aligned with the title and the content of the page. See the recording below.

https://github.com/user-attachments/assets/04862f86-7ced-4c91-ab56-27cd6f9953b7

Affected Component

ui5-dynamic-page

Expected Behaviour

The title, header area, and dynamic page content should always be aligned.

Isolated Example

Please use the dynamic-page playground in the documentation. https://sap.github.io/ui5-webcomponents/components/fiori/DynamicPage/

Steps to Reproduce

1. You can use the sandbox from the doc of dynamic page and open in full screen (https://sap.github.io/ui5-webcomponents/components/fiori/DynamicPage/)
2. Reduce the width of the window
3. See that all the elements in the page aren't aligned.

Log Output, Stack Trace or Screenshots

Priority

Medium

UI5 Web Components Version

2.3.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

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

[PetyaMarkovaBogdanova]

HI team, can you, please, the responsive paddings implementation inside Dynamic Page header, title and content? Best regards, Petya Markova. (UI5 Web components dispatcher)