Dialog: Dialog content alignment issue with zoom

[saurabhmehta02]

Describe the bug

We have developed UI components using the web component and these are also used in mobile app.
In mobile devices for accessibility purpose, user can use dynamic font size setting and increase the font size.
If we increase the base font by 1.5x or 2x (base font size at html root is 24px or 32px) then web components sets left position in negative in mobile view.
For example:
if base font size is 30px then styles becomes: left: -85px
if base font size is 32px then styles becomes: left: -105px

Because of this left style, the dialog content isn't aligned in mobile resolution with higher font size.

Isolated Example

No response

Reproduction steps

Navigate to https://sap.github.io/ui5-webcomponents-react/v1/?path=/story/modals-popovers-dialog--with-content&args=stretch:!true
Open chrome dev tools and enable mobile view
Set base font size to above 24px or higher and you can notice inline style is added at the dialog level and because of which the dialog content isn't aligned

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

1.24.0

UI5 Web Components Version

1.21.0

Browser

Chrome, Safari

Operating System

iOS and Android

Additional Context

No response

Relevant log output

No response

Organization

SAP Labs

Declaration

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

[girdharpatel]

Fixing this issue is very important for accessible users who are using mobile devices.

[Lukas742]

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

[NHristov-sap]

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

Please check if this is valid use case.

Best Regards,
Nikolay Hristov

[LidiyaGeorgieva]

Hello @saurabhmehta02 ,

Kindly provide more detailed steps for reproducing the issue along with a screenshot. Also, there seems to be a discrepancy between the title and the description: the title mentions "zoom," while the description refers to "Set base font size to above 24px or higher..."

Best Regards,
Lidiya

[saurabhmehta02]

Dialog rendering when base font size is 16px:

Dialog rendering when base font size is 28px:

Left position value:

Dialog rendering when base font size is 32px:

@LidiyaGeorgieva I hope above screenshots are enough for you to understand the issue.
Also, its easily reproducible in the web components demo too as shared in the reproduce steps.

We are using the web module creating using the dialog component in mobile app, its zoom in the mobile device (for accessible users). The font size in the web module is adjusted dynamically according to the zoom level on the mobile device.

[LidiyaGeorgieva]

Hello @saurabhmehta02 ,

Please be more specific how you "Set base font size to above 24px or higher"?
If I set "font-size: 30px" to the HTML element I see no issue:

Best Regards,
Lidiya

[saurabhmehta02]

Hi @LidiyaGeorgieva
Setting font-size here in the dev tools won't reflect for all the components.
I am updating font size at the html root using below code in JavaScript:
document.documentElement.style.fontSize = "32px";

As I mentioned previously, in our use case the web module is being used in the mobile app too.
When user is changing font-size in the mobile device, we set font-size for the web module as well using the code I shared.
This will ensure the base font size is changed for all the elements.

Thanks,
Saurabh

[saurabhmehta02]

@LidiyaGeorgieva If you want to reproduce in the component demo page, please use dev tools and open the dialog component in mobile view (which have done already) and then in the console run following script:
document.documentElement.style.fontSize = "32px";

Thanks,
Saurabh

[LidiyaGeorgieva]

Hello @saurabhmehta02 ,

After following your steps, the dialog appears fine and I don't see any issues:

Please provide an isolated, reproducible example of the problem, or we’ll need to close the ticket.

Best Regards,
Lidiya

[saurabhmehta02]

@LidiyaGeorgieva I am attaching the sample react app and two recordings.
In first recording, I am sharing steps to reproduce the issue in the web component demo page itself.
In the 2nd recording, I have reproduced the issue in the sample react app.

Steps to run the app:
node version 18.x.x
npm install --legacy-peer-deps
npm run start

It should ideally run on port 3000 so URL should be localhost:3000.
sample_repo.zip

Recording2.mov

Issue_recording.mov