Navbar is extending too far down on small screens

[DavisVaughan]

We haven't noticed this issue on any tidyverse packages (because their names are so short), but when the name of a package is long enough and the screen isn't very wide, you end up moving the "part of tidymodels 0.0.1" to the next line, which can cover up some of the screen, especially on mobile.

Here is what it looks like on a full screen laptop (all good here)

But when you shrink the screen really far you get...

Unfortunately, this is what it defaults to on most mobile screens because they aren't wide enough. Here is my iPhone 6s:

Clearly I just need to choose shorter package names.

[dpprdan]

This also happens with tidyverse packages in the wild, see e.g. ggplot2 (Screenshot from Firefox on a Moto G5 plus (Full HD Screen)).

With even longer package names, the "part of ..." text gets wrapped on a new line.

There are two issues IMO:

1. better text wrapping in the navbar (or placing the "part of ..."/version text somewhere else)
2. making sure that the navbar does not cover the page text.

Is this something that could be fixed directly in pkgdown?

[jayhesselberth]

You could hide the info div on mobile classes, similar to what was done in https://github.com/r-lib/pkgdown/pull/932

Update this div:

https://github.com/tidyverse/tidytemplate/blob/27af8fd35dbba81d83e8b4a7e8677b8821fb8cc3/inst/pkgdown/templates/navbar.html#L14-L17

with:

<div class="info hidden-xs hidden-sm">

[jayhesselberth]

Also we added headroom to pkgdown so the navbar will disappear on mobile when scrolling.

[dpprdan]

@jayhesselberth headroom is only a partial solution IMO, like I mentioned in https://github.com/r-lib/pkgdown/pull/1041#issuecomment-496023781. But hiding the "part of ..." ought to work with the usual package name lengths.