Tab bar wrap lab

All six keep every tab visible and clickable, which is what the owner asked of today's answer (a "More" menu hides tabs; sideways scroll needs trackpad dexterity). They differ in what a wrapped bar looks like and in when it starts wrapping. The order is not a ranking.

• A, natural wrap (shipped, c7384def). One row down to 820px in English, 860 in French, 840 in German; below that tabs flow onto as many rows as they need; the icons move as one group, right-aligned. The active tab's underline sits on whichever row it is in, floating above the rows below it rather than on the bar's rule.
• B, every row a strip. Each row carries its own hairline, so the active underline always sits on a line. Reads as a stack of tab strips; costs one hairline per row. New CSS, a few lines.
• C, an even grid. Equal cells, balanced rows (4 + 3 rather than 6 + 1), icons on a row of their own. Tidy at any width, but tabs stop sizing to their labels, and a long French label sets the cell width for all of them.
• D, icons go up first. When the whole bar no longer fits, the four icons move to the header's right corner, under "Research Report", and the tabs get the full row before wrapping. Measured here: one row down to 660px in English, 700 in French, 680 in German. The switch point is a fixed 880px in this lab; in the product it has to be wherever the whole bar stops fitting, which differs by language (820, 860, 840 here), so it wants measuring, not a number. A first cut at 760px wrapped between 760 and 820 and then went back to one row. Needs the icons in two places (one hidden) or moved in React.
• E, condense, then wrap. Tighter padding below 820px: one row down to 690px in English, 730 in French, 720 in German. On its own it is the "incomplete" answer; combined with A or B it delays the wrap.
• F, a quieter second row. Whatever does not fit drops to a smaller, secondary row under the rule. Keeps row one a normal tab bar, but which tabs end up "secondary" depends on width and language, not on their importance, and needs JS to measure where the break falls (drawn here with a fixed break for the narrow case).

Combinations worth considering

D with B (icons up, then rows as strips) keeps one row longest and wraps tidily after that. E with A is the cheapest improvement on what shipped.

Strings

All shipped: nav.* and header.researchReport in en, fr and de. The project name and counts are fixtures.