Issue Summary

Content fails to reflow when viewed at 320 * 256-pixel resolution on the “Restrictions” modal dialog, this will cause low-vision users to find it difficult to access the content when zoomed in.

Note: Similar issue is found on the "Restriction" modal dialog present on the "Create New page" page.

Steps to Reproduce

1. Open the “Edit page permissions” modal dialog.
2. Press Command + Control + R key in safari that will set the screen size to 320 X 256px and observe that reflow causes loss of content and functionality.

Screenshot 1: Edit Page Permission

Screenshot 2: Create New Page>> Restriction

Actual Results

When the page is reflowed, the functionality is not available and content gets cut off for low vision users.

Following issues found when the page is viewed in 320 X 256px →

1. The “Add” button is not available on the page & "Remove" button is getting cut off.

This will result in low-vision users finding it difficult to access the content when zoomed in.

Expected Results

Use relative units to define font and container sizes in CSS to ensure that the page's content reflows correctly when zoomed in. In addition, use CSS media queries to display web page content correctly when zoomed in or viewed using different devices. Content at high zoom levels should reflowed and should be displayed in a single column.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest