UXD - Mobile Search and Filters Modal

### Overview
We need to rework the search and filters modal to make tap targets acceptable for mobile navigation.

### Action Items

3 Main actions:
- [x] **The search and filters modal** has two states: open and collapsed
- [x] Make sure the starting state should be open (to avoid intimidating users with a map, with no controls)
- [x] Add some type of visual indicator, to show that the modal is opened or collapsed (e.g. an arrow)

- [x] **The address search** should be adjusted to ensure there is enough room for both:
the search bar and a mobile keyboard on the user's screen
- [x] Make sure there is a Neighborhood Council selection
- [x] Ensure there is enough room for the NC selection parent box (with a dropdown arrow)
_AND_ the NC search bar, in addition to a mobile keyboard

- [ ] Update component in **Design system library**
- [ ] Document user interaction in Figma
- [ ] Update the Hand Off section of this ticket with the final iteration of this design

---

### Design Iterations

**Please move ticket between `In Progress` and `In Review` to assist PM team**

Iteration 1

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

Iteration 2

Link to notes: https://github.com/hackforla/311-data/issues/2054#issuecomment-4293043184

Iteration 3

Link to notes: https://github.com/hackforla/311-data/issues/2054#issuecomment-4377585958

Iteration 4

Link to notes: https://github.com/hackforla/311-data/issues/2054#issuecomment-4550007880

Iteration 5

Link to notes: https://github.com/hackforla/311-data/issues/2054#issuecomment-4581472320

Iteration 6

Link to notes: https://github.com/hackforla/311-data/issues/2054#issuecomment-5115281874

---

### Hand Off Materials

Figma Section Name: [Original design system component](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=17378-8736&t=PvdqI0dj4wI29l2a-0)

Before Screenshot

After Screenshot (Finalized)

`REPLACE WITH SCREENSHOT UPLOAD`

### Designer Resources

- [Touch Targets on Touchscreens
](https://www.nngroup.com/articles/touch-target-size/
)
- [Potential Designs/Lo-fi iterations](https://github.com/hackforla/311-data/issues/2054#issuecomment-3465968877)
- [Bottom Sheets: Definition and UX Guidelines](https://www.nngroup.com/articles/bottom-sheet/#)
- [How to design bottom sheets for optimized user experience](https://blog.logrocket.com/ux-design/bottom-sheets-optimized-ux/)

Iteration Dropdown Copy/Paste

```

Iteration X

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

```

Instructions for Engineering Hand Off

To Start Engineering Hand Off...
1. Ensure all Hand Off Materials are filled in
3. Add the "ready for dev lead" label
4. Leave a comment saying "This ticket is ready for engineering hand off."