Issue Summary

The main content fails to reflow when viewed at 320*256 viewport.

Test URL

https://anusooya-1756357433853.atlassian.net/jira/for-you

Steps to Reproduce

1. Open the Jira Cloud home page.
2. Open the browser developer tools (Inspector).
3. Activate the Toggle device toolbar button to switch to responsive mode.
4. In the device toolbar, from the device dropdown, select any mobile device or choose Responsive.
5. Set the viewport size to 320 × 256.
6. Observe that the "Recommended", "Recent", and the "View all spaces" controls are not completely visible within the 320 × 256 viewport.

Screenshot: At default view

Screenshot: At 320 × 256 viewport

Actual Results

When the browser viewport is resized to 320 × 256 pixels, certain content within the main region becomes partially inaccessible, with segments of the primary content being truncated. Interactive elements like the "Recommended" and "Recent" buttons and the "View all spaces" link become unavailable at this size.

As a result, low‑vision users find it difficult to access key home‑page content and actions.

Expected Results

All content and controls on the page should remain fully visible and usable at a 320 × 255 viewport, with no loss of information or functionality.

Use relative units to define font and container sizes in CSS to ensure that 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 behavior. A workaround will be added here when available.

Environment

MacBook Pro (16 inch, 2021)
macOs 26.3 (25D125)
Windows - 11 pro
Chrome - Version 145.0.7632.76 (Official Build) (arm64)
Safari - Version 26.2 (21623.1.14.11.9)
JAWS - Version 2025
NVDA - Version 2024.4.2.35031
Voiceover - Version Latest