Avoid horizontal scrolling in header for mobile devices

[bvaughn]

Wouldn't it be nice if the header didn't require horizontal scrolling on smaller devices? Here's one possible take.

cc @joecritch

Screenshots at various sizes

Possible pro (or con)?

[bvaughn]

Hm. Looks like Dan merged something that touches this codepath already and we clashed.

I think this approach is still worth consideration 😄I'll hold off on dealing with merge conflicts until/unless other people also think it's worthwhile.

[reactjs-bot]

Deploy preview for reactjs ready!

Built with commit 6c89800

https://deploy-preview-1751--reactjs.netlify.com

[atomiks]

The layout reflow is kind of unattractive imo. I think the current approach is still the nicest alternative to a hamburger menu, but with a modification to the gradient so when scrolled right to the left/right edge, it doesn't appear (maybe extra padding?)

[gaearon]

Sorry for the conflict, I just wanted to plug the visible scrollbar problem on Windows asap.

I like that in this PR iPhone has a smaller font so everything fits by default. I'd like to see that change.

However, I prefer the current search/top bar behavior that doesn't reflow elements.

[bvaughn]

However, I prefer the current search/top bar behavior that doesn't reflow elements.

I don't think it's common to resize browser windows and actually see this reflow happening. Most users browse at a fixed size, so we're just trying to optimize every fixed size to avoid unnecessary overflow/scrolling.

Edit Sorry! I just understood what you were referring to was the little animated recording. Yeah, I agree that's not great. Let me think on that part a bit.

[sophiebits]

• +1 for avoiding splitting the nav on two lines when searching.

• The narrow window that now fits them all on one line looks nice, but I'm worried that it is too specific to your particular browser size and to English; I don't think we can count on things fitting perfectly, so we should make sure we have a design that works well with longer text too.

• The space between lines looks too big on the multi-line screenshot.

• What if instead of

  ⚛️ Docs Tutorial Blog Community 🔍 🌍

  we do

  ⚛️ React ………………… 🔍 🌍
  Docs Tutorial Blog Community

  on two lines (but with the nav links themselves (often) only on one). Does that fit better?

[bvaughn]

but I'm worried that it is too specific to your particular browser size

No. I tested a fluid range of size between the smallest size Firefox would go (it goes smaller than Chrome/Safari) to a full screen.

• ⚛️ React ………………… 🔍 🌍
  Docs Tutorial Blog Community

I like this suggestion.

[lex111]

Please do something already, otherwise now the search overlaps last menu item, so generally looks awful...

[atomiks]

@lex111 That seems to be what @sophiebits was talking about regarding adjusting the layout based around English wording. It's currently happening on the website, because "Docs" (English version) is much shorter, and the breakpoint assumes the English version's size.

RE two line layout: would the increased height be a problem on mobile since it's a fixed nav? It would reduce the amount of vertical space for viewing content. Maybe when scrolling up it could expand open, when scrolling down to read content, it hides to be one line.

[alkhasov]

Concept where long words fit well, from Russian translation for example:

[threepointone]

Would you like to revisit this?

[facebook-github-bot]

Hi @bvaughn!

Thank you for your pull request.

We require contributors to sign our Contributor License Agreement, and yours needs attention.

You currently have a record in our system, but the CLA is no longer valid, and will need to be resubmitted.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[harish-sethuraman]

Seems like this issue was addressed and is not occurring now. So I'll close the PR. Thanks :)