There are a number of ways we could improve the search interface. Improvements can be done as part of this task, or spun out into subtasks.

Layout

The menu is not attached to the input, and its width depends on its content. The menu should appear directly below the input so it seems "attached", and should be the same width as the input at all times. It should also have a max-height and use scrolling after that.

Menu with small width:

Menu that is both too wide and too long:

Mobile styles

The search UI is not very usable on mobile at the moment. It's too wide on small viewports:

Accessibility

We should follow the combobox pattern and add ARIA attributes connecting the input with the menu and its items.

Acceptance criteria

• Menu is attached to the input
• Menu is the same width as the input
• Menu has a max-height and adds scroll when needed
• Search input and menu are usable on mobile
• ARIA attributes are added to meet accessibility guidelines