[White Label - Document word]: At 320 view setting reflow mode, Horizontal bar is appearing

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Users who rely on small screen devices or reflow/zoom mode, including users with low vision, may experience difficulty navigating the interface when a horizontal scrollbar appears at 320px viewport width. Horizontal scrolling increases cognitive and physical effort, makes content harder to read and interact with, and can prevent users from efficiently completing tasks, reducing overall accessibility and usability.

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?

No response

How to reproduce the issue?

Prerequisites For Web:

• Navigate to settings > Set Display scaling to 100%.
• Navigate to Browser setting and zoom the page to 200%.
• Set the browser window to 320px viewport.

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 and type Document-word word in type your message text box.
   4.Navigate to the search results.
   5.Observe that, at 320 view setting reflow mode, Horizontal bar is appearing

What do you expect?

At 320px viewport width (Reflow mode), the interface should reflow correctly without displaying a horizontal scrollbar. All content should fit within the viewport and remain fully visible and usable without requiring horizontal scrolling, in accordance with accessibility guidelines

What actually happened?

At 320 view setting reflow mode, Horizontal bar is appearing

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

No response

WAI-ARIA reference

No response

Adaptive Card JSON

Additional context

No response

Reproduce the issue at the provided Web Chat URL using the 4.18.1-main.20240927.ea7a875 version, 200% browser zoom, and a 320px viewport. Inspect the white-label search-results layout and its rendered elements; done means the interface reflows without a horizontal scrollbar while remaining usable at that viewport size.