Change Details

== 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 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 ideally allow implementers to customize it. == Considerations The following suggestions haven't been verified with help from engineers yet, but we think that this behavior could be configured by implementers of the components based on either: 1. The viewport size (what seems to be currently the case), or: 2. The input's width (e.g. the menu would take the full width of the component in case the input becomes smaller than X)

== 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 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).

== 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 ideally allow implementers to customize itallow for the menu to expand to 100% of the component's width under certain conditions. == Considerations The following suggestions haven't been should be verified with help from engineers yetDST engineers and 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, but wwhere think that this behavior could be configured by implementers of the components based on either:e menu is too small but doesn't adjust because the breakpoint doesn't apply (1024px): {F35196053} 1. The viewport size (what seems to be currentlyIn order to prioritize the correct visualization and selection of the case), or: 2.menu's content, The input's width (e.g.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, the menu would take the full width of the component in case the input becomes smaller than X)currently documented in our sizing scale).