Fix tab headers on small display ratio

[AlexAndBear]

Description

Fixing tabheader misalign issue on small display ratio, also adjust selected style which is matching better now to other elements (for example left sidebar)
Issue reported by @ChrisEdS

Tested on:

• Firefox
• Google Chrome
• IE11
• Edge
• Safari
• Android Chrome Mobile

Screenshots (if appropriate):

Before:

After:

(Normal view mode)

(Shrinked view mode)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Database schema changes (next release will require increase of minor version instead of patch)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests only (no source changes)

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation ticket raised:
• Changelog item, see TEMPLATE

[micbar]

please add changelog

[AlexAndBear]

@micbar done

[JammingBen]

LGTM 👍

[hurradieweltgehtunter]

Hovering state of the tabs is wider than the un-hovered state which results in a little sideways glitch when hovering over the tabs.
font:weight: bold; makes the tab wider.
-> remove font-weight: bold;
or add font-weight: bold to unhovered state, too

[AlexAndBear]

@micbar @hurradieweltgehtunter @ChrisEdS since we refactored the whole tab headers look and feel, I request a new review

[ChrisEdS]

Tested on Chrome. Looks good to me!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
No Duplication information

depracted changes