UI for Mobile screens overflows boundaries

**Do you want to request a _feature_ or report a _bug_?**

This can be both, since don't know how much responsiveness is implemented in UI code.

**What is the current behavior?**

I'm trying to improve usability in docs pop out list for mobile versions. The popuout is too width and overflows the mobile screen by the left side. So I need to improve that. But don't know how I can do, or if there's some guide or styles that I can use. If you have something please let me know.

You can see It at: https://apache.github.io/royale-docs

You must reduce browser width below 600px to see mobile version (with a black right panel that can be open in the right)

The main problem is that I see a span element is created with style attribute in html. And I think I have no control over it

This is the code generated, in red the style that I assume I have no control over it:

```

strand

```

Thanks in advance for your help!! :)

**If the current behavior is a bug, please provide all the steps to reproduce and a minimal
[JSFiddle][3] example or a repository on GitHub that we can `npm install`
and `npm start`.**

I think more easy is just see It at: https://apache.github.io/royale-docs

You must reduce browser width below 600px to see mobile version (with a black right panel that can be open in the right)

**What is the expected behavior?**

Pop out list adapt to screen width and looks good instead of overflow

[1]: https://github.com/algolia/docsearch-configs
[2]: https://community.algolia.com/docsearch/config-file.html
[3]: (https://jsfiddle.net/)

Open https://apache.github.io/royale-docs and reduce the browser width below 600px, then inspect the generated Algolia autocomplete markup described in the issue. Trace the mobile docs search popup styling and verify that the popup adapts to the viewport without overflowing the screen.

Written by the indexing model from the issue text.