Issue Summary

Content fails to reflow when viewed at 320 * 256-pixel resolution on the “Calendar" page.

Steps to Reproduce

1. Navigate to the header and activate the "Calendar" link
2. Press the "Command + Control + R" key in Safari browser which will set the screen size to 320 X 256px.
3. Observe that reflow causes a loss of content and functionality.

Screenshot

Actual Results

Web page content failed to reflow when viewed at 320*256 viewport size. The content in the main content area gets overlapped with other content.
For e.g. the content such as "List", "Timeline" tabs and "Add Event", "Subscribe" buttons gets overlapped.
As a result, this will result in low-vision users finding it difficult to access the content.

Expected Results

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.

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest