Fixes icon-menu-hamburger size #19456

Description:

Expected:

Actual:

Review

• [ ] Functional review done
• [ ] Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• [ ] Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• [ ] Security review done
• [ ] Wording review done
• [ ] Code review done
• [ ] Tests were added if useful/possible
• [ ] Reviewed for breaking changes
• [ ] Developer changelog updated if needed
• [ ] Documentation added if needed
• [ ] Existing documentation updated if needed

@ulcuber would you mind to explain when the icon is displayed in an incorrect size? Does that happen in a specific browser only, or only on certain screen sizes or zoom levels? For me it seems to look fine 🤔

@sgiehl
Sorry for being unclear.

As nav .icon-more-verti, nav .icon-menu-hamburger {font-size: 2.7rem} based on reasonable font size (html font size or browser fonts settings) it could be any configured by user.

Overflow occurs at least on sizes <=600px
From Materialize: nav {height: 56px; line-height: 56px;}
56px < 2.7rem on default setting:

If user uses increased fonts then even worse:

On wider screen applied this:

<a class='mention' href='https://github.com/media'>@media</a> only screen and (min-width: 601px) {
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    height: 64px;
    line-height: 64px;
}
}

making it less visible but still visible when fonts increased: