Local navigation block: Hide page title before collapsing menu

[ryelle]

Fixes #640, see See WordPress/Learn#2622. When elements (site title, page title, navigation) are too long, they can overlap or cause wrapping issues. In #573, the navigation menu collapsed when they would wrap, but in some cases this can cause the navigation to be hidden on more screen-sizes than is ideal. Instead, the navigation menu should be prioritized, and the page title can be hidden first.

This PR updates the logic, so that the page title is hidden first, extending the screen sizes that will see the correct desktop version of the nav bar. If the menu will still collide with the site title, it does collapse down into the chevron dropdown, but this is only at some screen sizes, since most site titles are short.

Screenshots

Screen recording of shrinking the screen from 1440px, with an exaggerated page title and menu length. The page title disappears around 1300px, and while the menu stays inline until around 970px (where it would otherwise run into the site title). Previously, the menu would collapse at that 1300 width. (Note that these breakpoints are relative to the page content, not universal)

local-nav-collapse.mp4

	Before	After
1310px		same
1300px

On a real page, the Learn menu is now visible here, where previously it collapsed on a larger screen size.

To test:

• View a site with a "L2B" page header — has the site title and a page title.
• Scroll down so you can see the page title (easier to test)
• Shrink your screen down, the page title should disappear before the menu collapses into a chevron
• Nothing should wrap to a second line
• The mobile menu kicks in at 600px, and there should be no change there

[fcoveram]

From the screenshots, it looks great to me 🚀

[adamwoodnz]

LGTM

I did find one odd point between 550px and 599px where the site title is covered by the mobile button, but this appears to be existing, and I guess only happens with this really long title. It is fairly graceful.

[ryelle]

I did find one odd point between 550px and 599px where the site title is covered by the mobile button, but this appears to be existing, and I guess only happens with this really long title. It is fairly graceful.

Yeah, I avoided changing anything under 600px, but it is a little strange that the title appears for just that 49px width breakpoint. I've bumped it up to 599 so the page title stays hidden.