Fix svg icons disapearing in app navigation when text overflows

The issue is caused by the icon being positionned with negative margins
and the `overflow: hidden` rule when hide the icon when the text
overflows. Remove positioning with negative margins. This was only
happening in Firefox.

This fix #23849

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
pull/27936/head
Carl Schwan 5 years ago
parent a8aeaa6c7b
commit d0afc49df2
No known key found for this signature in database
GPG Key ID: 06B35D38387B67BE
  1. 7
      core/css/apps.scss

@ -267,7 +267,7 @@ kbd {
justify-content: space-between;
line-height: 44px;
min-height: 44px;
padding: 0 12px 0 44px;
padding: 0 12px 0 14px;
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
@ -277,11 +277,14 @@ kbd {
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
/* TODO: forbid using img as icon in menu? */
.svg {
padding: 0 12px 0 44px;
}
&:first-child img {
margin-right: 11px;
width: 16px;
height: 16px;
margin-left: -30px;
}
/* counter can also be inside the link */

Loading…
Cancel
Save