alpha-54: Site title no longer wraps - search box moves

[TomBrien]

🐛 Bug Report

In alpha-0.49 and previous (I believe but I'm struggling to get these to build now), longer site titles would wrap at the search in the header bar. This was especially important on mobile browsers where the width is obviously limited. As of alpha-54, the title is not wrapping and search box is being pushed out of the header.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Install Docusaurus and set up with a multi-word site title (total length more than 12 characters or so)
2. Enable the search plug in
3. Visit site on a mobile browser

Expected behavior

Words should wrap to ensure proper placement of search box

Actual Behavior

Title is shown on one line and search is moved
iOS:

Pixel 4 (on BrowserStack)

Your Environment

• Docusaurus version used: alpha-54
• Environment name and version: Chrome and Safari on iOS,
• Operating system and version (desktop or mobile): iOS on iPhone XS. Using browser stack I see it on other devices, including android, depending on screen size/resolution

[yangshun]

There's no good way around this as the site title can be potentially very long. I think as a lasting solution we could make the search as an icon-only on mobile, and focusing on it will expand and fill the whole bar, and the title disappears.

[TomBrien]

An icon that expands (on top of title) when tapped would be a really nice solution. Or on mobile move the search into the hamburger menu

[marcosvega91]

Hi, the only thing to do is to change the media query of the search-bar class.
Now the icon is shown under 360px. I think that we need to change it