Vertically expanding full-width search fields

[vanderburgt]

User story

As a user who wants to create and alert for multiple locations, I want the locations input field to accommodate multiple locations and keep them visible, so that I can assure that I have the relevant locations selected and remove the ones I don't need.

Acceptance criteria

1. When the user initially opens the search form, the location field is a single-line input.
2. As the user starts typing or adding location tags, the location field should automatically expand vertically to accommodate the entered tags.
3. The expansion should happen smoothly without sudden jumps in the interface.
4. The field's expansion should be responsive to the number of tags the user adds, adjusting its height accordingly.
5. When I remove tags or clear the field, it should contract back to a single-line input.
6. The design and behavior of the expanding location field should match the provided design and screencast.

Additional Information

Design and screencast for the expanding location field behavior are available:

• Screencast: https://github.com/openstate/jodal/assets/8989205/2b5ae888-8934-42d2-bd8d-a0ff18ddafc4
• Figma: https://www.figma.com/file/Tcv7xuwikoVW0U8c0pqDDq/Graphics?type=design&node-id=911-2752&mode=design&t=Tp4V5yymIoBCSLQi-4

Tasks (if any)

e.g. design, development, etc.

• [x] Design
• [x] Implement full-width search bars for both the search query field and the locations field.
• [x] Implement the expanding behavior for the location field based on the provided design and screencast.
• [ ] Test behavior with multiple variations.