[White Label - Video Vimeo]: At 200% resize setting radio controls "Fluent UI", "White Labelled" getting cropped.

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Users with low vision who rely on browser zoom (200%) may not be able to fully see the radio options or their labels. Cropped text makes it difficult to understand what each option represents.

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

https://compulim.github.io/webchat-loader/webchat.html?v=4.18.1-main.20240927.ea7a875&p=ws&sr=westus&uid=r_d0jz4rlf4i&cid=GppkPpCMKWjFI4WVjBQPfk-us&dt=eyJhbGciOiJSUzI1NiIsImtpZCI6IkF0eW41N1liX0dGLUE2Vm1XWXlrSXRaTHVvSSIsIng1dCI6IkF0eW41N1liX0dGLUE2Vm1XWXlrSXRaTHVvSSIsInR5cCI6IkpXVCJ9.eyJib3QiOiJoYXdvLW1vY2tib3Q0LW1vY2stYm90LWJvdCIsInNpdGUiOiI4NVhQdDRTVlVrcThKN0RHV3p1T2loWEhlQ25OQmlhczkzWFpwZWFROGpxcldrbFdaN3kySlFRSjk5Q0JBQzRmMWNNQUFyb2hBQUFCQVpCUzRjYXoiLCJjb252IjoiR3Bwa1BwQ01LV2pGSTRXVmpCUVBmay11cyIsIm5iZiI6MTc3MTIyNjkxMCwiZXhwIjoxNzcxMjMwNTEwLCJpc3MiOiJodHRwczovL2RpcmVjdGxpbmUuYm90ZnJhbWV3b3JrLmNvbS8iLCJhdWQiOiJodHRwczovL2RpcmVjdGxpbmUuYm90ZnJhbWV3b3JrLmNvbS8ifQ.dCKi7ArusmPCEETR-N__HmInUrM9ga5pj9k4qjkSgXxJmggUMmYk28q71htAbEq_1qoQeFW2cTYVFgLmOHOMiuTM_BFpszYW6mOSpVgjbGSoxf9LIkw6L_Q3eMYaVux5kL2vQdzmRshgpaiUCqz0SO4_x-5Wclu5106v7ZUkPhV25vUwZ568LAjM-s_ZIcXgnFcEcE5YAExh0HZwmAfUZSMlwIjZ_p1meq_QxKsGhbnUM3aFxFSn_6H_O5jqLdfiUEWLPLOR16Sd20rJySBqscFWA84fnMCdzyIMC0Hr59nEI4dtpH5qTjsd1E5JTB2EfjycX8bbRpoiL_n-wgtS5Q

How to reproduce the issue?

Pre-Requisites:

1. Go to Settings > System > Display
2. To ensure consistent testing, set the machines target resolution (1280 x 1024). And scaling should be at 100%.
3. Zoom the page to 200% and refresh the page.

Repro Steps:

1. Open URL: https://compulim.github.io/webchat-loader/ and sign in using valid credentials.
2. Navigate to web chat page and select 4.18.1-main.20240927.ea7a875 (30/9/2024) version and then select mockBot link under present label and then select open web chat in new window link at bottom.
   3.Navigate to white label experience chat page.
   4.Observe that, at 200% resize setting radio controls "Fluent UI", "White Labelled" getting cropped.

What do you expect?

The content should retain both readability and functionality at 200% zoom, with no loss of information or interaction.

What actually happened?

At 200% resize setting radio controls "Fluent UI", "White Labelled" getting cropped.

Do you have any screenshots or recordings to repro the issue?

Did you find any DOM elements that might have caused the issue?

No response

MAS reference

No response

WCAG reference

https://www.w3.org/WAI/WCAG21/Understanding/resize-text

WAI-ARIA reference

No response

Adaptive Card JSON

Additional context

No response

Start by reproducing the white-label Web Chat experience from the webchat-loader entry point at 200% page zoom, using the reported 1280 × 1024 setup and the WCAG resize-text reference. Inspect the radio controls and surrounding layout to identify why the “Fluent UI” and “White Labelled” labels are cropped. Done means both labels and controls remain readable, visible, and usable at 200% zoom.