Long Names Exceed Mobile Viewport Width

[mdrxy]

On mobile displays, long names will push the navbar content off-screen, causing the width of the page to be wider than the viewport width (requiring horizontal scrolling). See:

I added an @media query to target mobile and a secondary shortened version of my last name to activate to address this issue, though it might be nice to have this handled by default in new sites.

Here's my repo with the workaround

[philipmjohnson]

Thank you! I've added the media query to all of the default themes.

[philipmjohnson]

An additional comment from @mdrxy:

Thank you! It should be noted that in order for this to take effect, users will need to add Mason D. to header.html after navbar-brand. I hard coded my abbreviated name, but adding site.data.bio.basics.shortname would probably be a more elegant solution so that it is set when people are configuring their bio during setup.

[philipmjohnson]

The current fix means that the name simply disappears from the navbar at mobile widths, which is not optimal.