Fix Design Guide category tabs stacking and hamburger menu transition

[jhung]

Describe the bug

When the client window shrinks, the categories on the Guide stack from 4 in a row to 3x1, before jumping to a hamburger menu.

Originally filed as part of FLOE-478

Expected behavior

Consider the switch to hamburger earlier to avoid the 3x1 stacking, or get rid of hamburger menu all together and keep the category tabs.

Screenshots

Additional context or notes

Some prototyping may be required to try different approaches which should be reviewed by designers.

[jhung]

In talking with @jobara, we think that this issue is difficult to fix given the current visual style. The skeuomorphic "tab" design does not scale well with different screen sizes and text string (especially with long translations).

We are suggesting that the tab style navigation be redesigned so any wrapping does not break the visual style.

[jobara]

@jhung in thinking about the issue this morning, until a redesign occurs, we may want to explore preventing wrapping completely. In those case we could do one or more of the following:

• use ellipses if the text overflows
• fluidly scale the font size so that it gets smaller if the text doesn't fit

Considering that we only have languages at the moment you could also selectively apply or vary the approach to work best with each language.