At 400% zoom mode, content present in the dialog is getting overlapped

[polatengin]

Other Instances:
Other instance 1: Votes tab
Path: Retrospective page-->Votes tab
Issue: At 400% zoom mode, content present in the page is getting overlapped and chopped.
PFA (Other Instance_1_At 400% zoom mode, content present in the page is getting overlapped and chopped.)
Note: Same issue reproes throughout the application.

Impact on a Person with Disability (PWD):
Users with low vision who find it difficult to read the text in small font uses enlarged text with re-flow so that they can understand the text is getting impacted as control is getting chopped, users will not be able to understand and perform action on the controls.

Test Environment:
OS: Windows 11 [Version 23H2 (OS Build 22631.2715)]
Browser: Edge Version (119.0.2151.97), Chrome Version (119.0.6045.200)
URL: Work items - Boards (visualstudio.com)

Pre-requisites:
Step 1: Enable Display setting to a scale resolution of 1280*1024 and update scaling to 100%.
Step 2: Enable the browser setting to 400% zoom mode and reload the page

Repro Steps:
Step 1: Open MCAPS ADO in Edge/Chrome browser.
Step 2: Navigate to 'Retrospective' in left navigation and invoke it.
Step 3: Navigate to '...' ellipsis control and invoke it.
Step 4: Navigate to Create new retrospective button and invoke it.
Step 5: Create new retrospective Dialog gets appear.
Step 6: Verify whether at 400% zoom mode, content present in the dialog is getting overlapped or not.

Actual Result:
At 400% zoom mode, content present in the dialog is getting overlapped.
Observation: Text in the edit fields is getting overlapped.

Expected Result:
At 400% zoom mode, content present in the dialog should not get overlap and should be clearly visible.

Suggestive Fixes:
1.Create responsive media query for 400% zoom mode for not to make content overlapped.
2.Ensuring your website is designed responsively is the best way to fulfill this criteria.
3.CSS adjustments may conflict with the responsive nature of a typical framework website. For example, adding a fixed height to a text box and setting the overflow to hidden will result in text getting cut off when assistive technology is used to increase font size.

MAS Reference:
MAS 1.4.10 – Reflow

WCAG Reference:
Understanding Success Criterion 1.4.10: Reflow (w3.org)

AzDO Reference Link:
https://worldwidelearning.visualstudio.com/MCAPS%20Accessibility/_workitems/edit/1713050