Skip to content

Commit

Permalink
Fix svg icons disapearing in app navigation when text overflows
Browse files Browse the repository at this point in the history
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 <[email protected]>
  • Loading branch information
CarlSchwan committed Jul 13, 2021
1 parent a8aeaa6 commit d0afc49
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions core/css/apps.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 */
Expand Down

0 comments on commit d0afc49

Please sign in to comment.