Header - Search panel: Content fails to reflow

Issue Summary

In the “Header” section, content fails to reflow when viewed at 320*256 viewport.

Steps to Reproduce

1. Navigate to the "Header" section.
2. Navigate to the "Search Input field" and activate it.
3. Press the Command + Control + R key in Safari that will set the screen size to 320 X 256px and observe that the page fails to be reflowed.

Screenshot

Actual Results

When users access the page at 320*256 viewport, the content present inside the search popup gets cutoff.
This will result in low-vision users finding it difficult to access the content when zoomed in.

Expected Results

The content of the page should be appropriately visible and not get cut off, the cut-off content visibility will result in interactive elements and important functionality getting missed by low-vision users. 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 be 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 Sonoma 14.1.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