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>

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 370784c178551d653b03d8743ebddbe71d37c1d5..2b25824aff9c6617ccc16731f25223d05974c999 100644 (file)
--- a/core/css/apps.scss
+++ b/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 */