Refactor language tabs and make them responsive

Motivation

We want to improve the CMS views for mobile screen. One major remaining issue are the language tabs. Up until now they still look wild (s. screenshot). However because they were initially written in Python this needs major changes. Therefore we want to rebuild the language tabs to use Javascript. Based on that we want check via Javascript how much space there is and fill the space with as many tabs as possible (as by now this is hard-coded at four tabs) and store the left-over tabs in a dropdown "Other languages". In case there is not enough space to even show the current language and "other languages" the dropdown has the higher hierarchy and the current language gets hidden.

Proposed Solution

Refactor language tabs using Javascript
Make language selection usable on mobile screens

Alternatives

We can ask UI/UX for better solutions. So far we have only discussed this inside the CMS team

Additional Context

This is part of the Meta Issue https://github.com/digitalfabrik/integreat-cms/issues/170 to make the CMS responsive.

This is blocked by:

2108

Design Requirements

Suggestion from @timoludwig

My suggestion would be the following:

On very wide screens which fit all of them, we

show all tabs
![Screenshot 2023-03-12 at 13-21-11 Integreat Editorial System](https://user-images.githubusercontent.com/16021269/224544534-f642f180-dad7-4813-84a7-8b7b7359b9d0.png)
On all screens which fit at least 2 tabs (but not all), we

show the current language plus as many as possible, and the "other languages" dropdown
![Screenshot 2023-03-12 at 13-21-58 Integreat Editorial System](https://user-images.githubusercontent.com/16021269/224544623-7dfa98bf-a071-47ce-b632-cc466f84b9a1.png) ![Screenshot 2023-03-12 at 13-22-29 Integreat Editorial System](https://user-images.githubusercontent.com/16021269/224544629-b84f2ca1-55bf-47bd-afa8-7220b217e072.png)
On all screens which only fit one tab, we either

replace the "other languages" text with another icon
![Screenshot 2023-03-12 at 13-36-47 Integreat Editorial System](https://user-images.githubusercontent.com/16021269/224545135-df11371e-f87c-4383-8216-2b1b4a1cfe0e.png)

omit the text completely,
![Screenshot 2023-03-12 at 13-33-35 Integreat Editorial System](https://user-images.githubusercontent.com/16021269/224544960-70b25bb8-617e-4392-b9cc-b2005c126d62.png)

or show the dropdown chevron inside the one tab
![Screenshot 2023-03-12 at 13-24-39 Integreat Editorial System](https://user-images.githubusercontent.com/16021269/224544654-492b06f9-6893-4b07-8874-a5d2ecb3cc27.png)
All screens which are even smaller are probably unusable for content creation anyways, I don't think we need a separate solution for that.

Since we don't know how many tabs fit onto the screen until we have rendered them, this solution would have to be implemented in JS.

digitalfabrik / integreat-cms