Background
Currently, the menu of the TypeaheadSearch component in Vector takes the width of the input that triggers it by default, and expands to take the full width of the Search input + button when the viewport size is smaller than 1000px. All in order to keep the content readable:
Considerations
We have two options:
- Enabling the same behavior in the cdx-typeahead-search component in Codex (and make this configurable, ideally based on the component's width instead).
- Making the TahS menu's width take 100% of the component's width (input + button) by default. For the following reasons:
- Would make the maximum amount of space available for options by default
- The menu won’t edpend on the input's width, and shrink in case the copy of the button makes the input smaller
- No need to include further, potentially complicated logic
- We’d be following an existing pattern (e.g. the Combobox menu also takes the full with of the input + button that trigger it)
The main con:
- We’d create some inconsistency in production, since current TahS components’ menus take only the width of their input by default too.
