Fix navbar line break in docusaurus

[andriijas]

The new docusaurus 2 site is gorgeous. I noticed a line break in the navbar in safari 13. I didn't manage to sort out why it happens. Putting in Create React App on the official docusaurus website didn't break the line (middle screenshot below). Right now Im not sure whatever it's an issue in bootstrap or docusaurus

I ended up fixing it with white-space: nowrap

I also tried:

• Fixing flex basis on the container
• Fixing flex wrap

It's a minor but it makes it looks smoother.

ping @endiliey

[endiliey]

That was intentional though for small screen. cc @yangshun

If this PR is applied, for small screen you'll see discrepancy like this

[andriijas]

Ah, thats not good enough. Are the breakpoint variables available for custom.css or is there any other way to solve it?
Thx

[andriijas]

I dont think its intentional though because in chrome its correct (1 line) in desktop and line split in mobile.

[iansu]

@endiliey I did notice this on mobile as well. It would be nice if the search input was maybe just the magnifying glass icon in this case. Clicking it could expand it in some way to allow text entry. Just a thought.

[endiliey]

We already did that. For devices with viewport width less than 360px, the searchbar is replaced with a search icon.
On tap of the search icon the searchbar is expanded and the text "Docusaurus" beside the logo is hidden and remains hidden while the search bar is expanded.

Example:

https://user-images.githubusercontent.com/17883920/62456721-4b285f00-b7a3-11e9-930b-0542ad3f7fdf.gif

I guess we need to adjust the media query.

WDYT @yangshun on the line break ? Its infima (another facebookincubator project) css

[andriijas]

@endiliey any idea on how to solve this with the latest docusaurus beta or should we just close this one?

[endiliey]

we use a css framework called infima (still in facebookincubator). I think @yangshun is the best person to answer this