Issue Summary

Content fails to reflow at 320 x 256 viewport which will cause low-vision users to find it difficult to access the content when zoomed in.

Steps to Reproduce

1. Open the “Backlog” page
2. Navigate to any issues present in the backlog and activate it.
3. Press cmd+ctrl+R to activate the reflow(in Safari browser) or.
4. Open the Inspector of the browser(In Chrome browser).
5. Activate the "Toggle device toolbar" button present in the Inspector.
6. From the device dropdown (present in the toolbar on top of the page), select the "Responsive" option.
7. Set the resolution to at least 320 x 256.
8. Observe the content failed to reflow and the mentioned content is not available.

Screenshot

Actual Results

When users access the page in 320 * 256 pixels, the content present on the page gets cut off. The floating comment section of the issue caused this issue of reflow.

As a result, this will result in low-vision users finding it difficult to access the content.

Expected Results

All the content on the page should be available when the page is viewed at 320 * 256 viewport.

Ensure that all the page content is visible when viewed at 320 * 256 viewport. Use relative units to define font and container sizes in CSS to ensure that the page's content reflows correctly when viewed at 320 * 256 viewport. In addition, use CSS media queries to display web page content correctly when viewed using different devices, such as mobile phones, tablets, and so on.

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest