From e8259bf20fbafaad2157bc39adc4a7b3b76486a9 Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Tue, 13 Jul 2021 12:24:01 +0200 Subject: [PATCH] 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 --- core/css/apps.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 370784c178551..2b25824aff9c6 100644 --- 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 */