[PWA Builder - SC Home Page]: UI Does Not Adapt Properly at 400% Zoom – Content Overlaps and Text Gets Cropped

[Priyanshu073]

What happened?

When the browser zoom is set to 400%, the SC Home Page in PWA Builder fails to reflow content properly. As a result, some elements overlap, and text is cropped or cut off, making content partially or fully unreadable.

How do we reproduce the behavior?

1. Open the URL: https://www.pwabuilder.com/
2. Apply 400% browser zoom and set resolution to 1280x 1024 from system settings.
3. Navigate the page in the zoom settings.
4. Verify the issue.

What do you expect to happen?

The application should reflow content appropriately at 400% zoom to maintain readability and usability, ensuring no overlapping elements or cropped text, as per WCAG reflow guidelines.

What environment were you using?

OS: Windows 11 Version 24H2
OS Build: 26100.4202
URL: https://www.pwabuilder.com/

Additional context

Note:
This issue is repro throughout the application.

User Experience:
Users with low vision who rely on high zoom levels to read content may be unable to access or understand critical information, resulting in a poor and inaccessible experience.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/reflow.html

Attachments:

2025-06-12.12-54-27.mp4

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .