[v2] styling bug when using the default preset for algolia search

[jackyef]

🐛 Bug Report

The styling for algolia search seems to be broken in some cases when using docusarus v2.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

(Write your steps here:)

1. Go to https://react-isomorphic-data.netlify.com/
2. Type "with" or "use" into the searchbar.
3. The styling for the search result is broken

Expected behavior

I would expect the algolia search results to be displayed correctly, without the big gap in the center

Actual Behavior

Reproducible Demo

The repo for the site can be seen here: https://github.com/jackyef/react-isomorphic-data/tree/master/docusaurus

[endiliey]

Related css here https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css

[yangshun]

I did some digging into the issue and I think the root cause could be one of these two:

1. Algolia changed some HTML and CSS but because we cloned their CSS in docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css, our CSS is outdated and no longer matches the updated styles.
2. Algolia currently has a bug.

See the attached screenshots. I was comparing the difference between the working HTML and the buggy HTML - the buggy HTML seems to have missing classes that were present in other rows. Adding those two classes fixed the layout issue.

@endiliey any reason why we cloned Algolia's CSS here? Is that the correct way to use Algolia Docsearch?

[endiliey]

Its reactjs.org css 😊.

The default one wasnt as nice and iirc is only available through cdn. Also colocated the css so that its swizzle-able easily.

P.S: waiting for stable release of docsearch v3 which is so much smaller in bundle size and came with dark/light theme css. They rewrote it from scratch and no longer relies on zeptojs