fix: Stop double scroll issue

[vinnyjth]

🐛 Issue

With the search modal open, it was possible to scroll on the page itself instead of in the modal alone.

✏️ Solution

This was a complex issue to solve. The results list was nested inside of the search input, meaning that it's rendering was technically an overflow of the search input.

To resolve this, I moved the result list outside of the search input, meaning that it properly captured scroll events instead of letting them pass through.

In order to move the result list, I had to move break apart the Autocomplete component, hence the large number of lines changed.

🔬 To Test

1. I made a mess of index.html to demonstrate the issue. I'll roll it back after you test, if you want :)
2. I recommend using ngrok to test on your phone as well.

📸 Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
apollos-micro-service	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 29, 2024 8:08pm
apollos-web-embeds	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 29, 2024 8:08pm

[redreceipt]

@vinnyjth Did you mean to assign me? What would you like me to do?

[vinnyjth]

@redreceipt I meant to assign @nlewis84 but I would always love your review

[redreceipt]

@nlewis84 can have it :)Sent from my iPhoneOn Jan 26, 2024, at 1:45 PM, Vincent Wilson ***@***.***> wrote: @redreceipt I meant to assign @nlewis84 but I would always love your review —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[nlewis84]

Looks good. I compared to how it was previously, and I think this works more as expected. This is the first "real" PR since the linter changes. Any weirdness there?

[nlewis84]

@vinnyjth Thanks for the changes to index. You can totally revert and ditch those changes.