=== Background and goal
Currently, the menu of the TypeaheadSearch component in Vector 2022 takes, by default, the width of the input that triggers it, and it only expands to take the full width of the Search input + button when the viewport becomes smaller than 1000px. All in order to keep the content readable:
{F35120446}
The Codex TypeaheadSearch component should incorporate this "responsive" behavior, and allow for the menu to expand to 100% of the component's width under certain conditions.
=== Considerations
The following suggestion should be verified with help from DST engineers and designers, approved by the Readers Web team, but we think that the responsive version of the menu (its full-width mode) should be triggered by the width of the input, instead of the viewport's. Making the menu wider only in relationship to the viewport can cause issues like the following, where the menu is too small but doesn't adjust because the breakpoint doesn't apply (1024px):
{F35196053}
In order to prioritize the correct visualization and selection of the menu's content, we'd like to recommend that the TahS menu becomes full-width when the input's width decreases below 384px (a multiple of the system's base unit, currently documented in our sizing scale).
=== Acceptance criteria
[] When the width of the TypeaheadSearch input becomes smaller than 384px, the TypeaheadSearch Menu becomes full width