🐛 [BUG] - SubdomainNavBar has wrapping/overflow issues

[simurai]

Describe the bug

Reported here (internal). When resizing the browser window to around 930px, it can cause wrapping/overflow issues when there are multiple CTA buttons with multi-word text labels.

Reproduction steps

1. Go to https://github-2c2fbb9b0f-1106639.drafts.github.io/ (internal)
2. Scroll down a bit (until CTAs appear)
3. Resize browser window to around 930px
4. Notice wrapping/overflow issues

Expected behavior

1. Go to https://github-2c2fbb9b0f-1106639.drafts.github.io/ (internal)
2. Scroll down a bit (until CTAs appear)
3. Resize browser window to around 930px
4. Button text should not wrap onto multiple lines. Buttons should not overlap links.

Screenshots

Browsers

Chrome

OS

Mac

[simurai]

I tried to fix it with white-space: nowrap;, but then the buttons get cut-off:

And truncation also doesn't really work. I guess it's literally not possible to show everything in the available space. Maybe instead of switching to the "hamburger menu" at 767px, it could happen earlier, based on the space that is needed. Might not be easy..? Container queries? JS measuring needed width, then switching over? 🤔

[simurai]

Ok, as a quick fix, the "Become a speaker" button gets hidden when not enough space (around 1080px).

[rezrah]

Thanks for filing this @simurai ❤

Potential solutions:

• Implement small Buttons for consistency with other, newer nav patterns (SubNav)
• Add short title option

We generally discourage long CTA labels anyway, but the above two options might be enough here.