Make tabnav responsive

[colinkeany]

This PR makes the tabnav component responsive. Currently the tabs stack at responsive sizes. This PR makes it so they are horizontally scrollable.

Before	After

/cc @primer/ds-core

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/gv1rs2nki
✅ Preview: https://primer-css-git-responsive-tabnav.primer.vercel.app

[vdepizzol]

@colinkeany how does this behave on small screens in the desktop? I worked with @jonrohan on repo tabs, and we went with some specific behaviors including overflow buttons for desktops.

On mobile, it looks weird the scrolling area takes only the tabnav container, and doesn't go all the way to the page margins...

[colinkeany]

@vdepizzol this does get cut off at smaller sizes, and doesn't accomplish the illusion of scrolling off the page. That happens on the PR page because of the parent wrapper which adds padding around the entire page.

How did you and @jonrohan manage to work around that with the repo tabs?

[simurai]

The "Write + Preview" tabs for the comment input in issues have a responsive hack:

I tried something similar a while back, see https://github.com/github/design-systems/issues/587#issuecomment-479446234. But because there can be that .tabnav-extra on the right, it's hard to predict when the tabs run out of space and the .tabnav-extra should move to its own line.

That said, even though this PR doesn't solve all the cases, might still be an improvement over the current situation? 🤔

[colinkeany]

That's a really nice take on this, @simurai! I'm going to mess around with this a bit more and see if there's anything we can do about the extra content (buttons and text).

[simurai]

Maybe there is a way with flex-wrap or grid? But it also depends a bit on the content if the .tabnav-extra should move above or below the tabs. Maybe we can have a certain default. But some cases still need manual tweaking.

[emilybrick]

I like @simurai's suggestion of the extra tabnav widget + button content appearing above the tabnav in the case that there's no enough room.

The one exception would be in the case that the tabnav widgets (e.g. the markdown styling options) are specific to a single tab, like this:

☝️In this case, I'd imagine the widgets would go underneath the tab when that tab is selected ☝️

Aside from that, I think we should consider allowing the tabs themselves to horizontally scroll. It seems pretty natural that tabular content would scroll. If we used a kebab, similar to the repo nav that @vdepizzol is working on, we should just test what that feels like to have both present in the page (hopefully they won't be stacked right on top of each other in most scenarios).

[simurai]

Ok, let's give it a try.

For cases with a .tabnav-extra, we might have to look at them case by case. And do something like:

tabnav-extra float-md-right mb-2

So only move it to the right when there is enough space.