Language tabs scale poorly

[timobrembeck]

Describe the Bug

Our language tab design doesn't scale well if the number of languages is increasing or the screen size is small.

Expected Behavior

I see three main problems:

• The "Version" link should not cause the language tabs to float. Instead, we should maybe move it back into the white box to the rest of the form?
• Tabs in the second row should expand until the form-box (so no light blue background should be visible between the tabs and the box). But not sure whether that's doable, since the space underneath is in theory taken by the following flex items...
• If a tab in the top row is selected, it shouldn't have a bottom white border (because this causes it to "melt" into the bottom tab which makes no sense - the idea was that it should "melt" into the box itself). But no idea whether we can safely detect whether a tab is in the top bar or the bottom bar, since it's just one flexbox...

Actual Behavior

Everything looks weird

Additional Information

[ulliholtgrave]

Together with UI/UX, I have created a small draft for a redesign of the language selection. From a total of 5 languages, the other languages should be available in a drop-down (similar to the tree structure). The languages should be sorted according to their status, so that it is easier for the user to get translations that still need work. In addition, the current translation, e.g. in ours, should be marked in dark blue. The versions should also be moved out of the UI area and back into the status box.

[JoeyStk]

This what I have tried up until this point: