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.
View the homepage at a screensize at 700px so you see the mobile menu icon
Inspect the word Menu
See the computed line-height being applied on pfe-navigation__main--menu-label
Inspect the word English
See the computed line-height being applied on pfe-navigation-item [slot=trigger]
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.
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").
Description of the issue
class="pfe-navigation__main--menu-label"
has a different line-height then the words in theclass=pfe-navigation__utility
. This causes the mobile menu icon to sit lower when comparing it to the globe, search, user and 3x3-grid icons.Menu
has computed line-height: 13.2pxEnglish
has computed line-height: 18pxImpacted component(s)
Steps to reproduce
Menu
pfe-navigation__main--menu-label
English
pfe-navigation-item [slot=trigger]
Expected behavior
pfe-navigation__main--menu-label
line height should match the line height ofpfe-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