Fix Progress bar width

[Borreg0]

Resolves a part of #5855

[MSoeb]

We need to make a few changes:

1. When languages are switched, the size of the bar always changes and the distance to the text on the left also changes.

To fix this problem, the bar should be narrower overall so that it remains in the same position even when languages are switched.

Use the Russian translation as a reference, as it has the longest text length.

2. Small screens: The content should still be visible on small devices even with the bar. The mat cards and the content should fit in a format, which fits the screen space.

Example of unreadable content.

3. Alignment of gender numbers: The alignment of the sub gender numbers should be in line with the overall value.

See: The numbers left of the red line should be in line aswell.

[MSoeb]

Some additional changes are required.

1. Matcard on small screens like smartphones: The matcard should not be scrollable horizontally on small devices. The matcard should fit the screen size. I've tested it with a Pixel 8 and on a iPhone SE. I can slightly be moved. Here a video example of it.

5875.-.moveable.Matcard.mp4

2. Total value and numbers of genders under it: The values should be aligned like in the mockup.

Affected area:

3. Problem with the text to the left and right of the progress bar:
There are several issues occurring simultaneously here. First, switching languages causes the progress bar to shift. This is clearly visible when you change the language from German to Russian. Second, the spacing between the progress bar and the text on the right is too small, which doesn’t look good visually.

To solve both problems, I would suggest making the progress bar slightly shorter overall. This would create more space on the left and right side, which, in my opinion, would resolve the issue.

[Borreg0]

I am not sure if the class bar-height is useful. Please take a look.