[fix] pfe-navigation 1.x | line-height bug

[LyndseyR]

Description of the issue

• class="pfe-navigation__main--menu-label" has a different line-height then the words in the class=pfe-navigation__utility. This causes the mobile menu icon to sit lower when comparing it to the globe, search, user and 3x3-grid icons.
  • Word Menu has computed line-height: 13.2px
  • Word English has computed line-height: 18px

Impacted component(s)

• pfe-navigation

Steps to reproduce

1. Go to 'https://www.redhat.com/en'
2. View the homepage at a screensize at 700px so you see the mobile menu icon
3. Inspect the word Menu
4. See the computed line-height being applied on pfe-navigation__main--menu-label
5. Inspect the word English
6. See the computed line-height being applied on pfe-navigation-item [slot=trigger]
7. Visually see how the mobile icon is sitting lower than the other 4 icons.

Expected behavior

pfe-navigation__main--menu-label line height should match the line height of pfe-navigation-item [slot=trigger]. When it has the same line-height the mobile menu icon will sit at the same line as the globe, search, user and 3x3-grid icons.

Screenshots of showing bug

Screenshots with line height changed inline

[starryeyez024]

Implementation notes:

The pfe-nav items have 3 declarations for line height, but the mobile menu text does not get the 3rd one because its not slotted, (it's provided in an attribute pfe-menu-label="Menu").

Globe icon, line height of 1.3

Menu Icon, gets line height of 1:1