Search is clipped on mobile

[Haroenv]

Hey there! Thanks for making docusaurus 👋

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Steps to Reproduce

1. go to any of the websites using docusaurus
2. use Safari
3. open "responsive mode" (cmd-ctrl-r)
4. type something in the search bar

Expected Behavior

The search results to take up most of the screen and have reasonable padding

Actual Behavior

The search results are truncated and don't take up the whole screen. They also overlap a bit with the title.

Reproducible Demo

https://docusaurus.io has this for example

[JoelMarcey]

@Haroenv Thank you for this issue. Are you seeing this on Chrome too, btw?

[amyrlam]

I'm game to claim the issue!

Seems like the styling of the search bar has been fixed as we replaced the site title with just an icon when on mobile.

To clarify, it seems like we want the Algolia results to extend to a much larger height? Maybe if it's cut off at height x it can be cut off at the middle of a row as well so that it's clear it can scroll? I can play around with the design. Here's a gif of what I see right now:

I see this on Safari and Chrome.

[Haroenv]

I'd suggest to show it full width at least, and probably quite a bit longer so it doesn't need to scroll

[JoelMarcey]

Thanks @amyrlam!

[amyrlam]

Thanks for the input - I'll tag you both on the PR, in case we need to workshop the design!