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 <[email protected]>
nextcloud · Jul 13, 2021 · e8259bf · e8259bf
1 parent 49d7a7b
commit e8259bf
Showing 1 changed file with 5 additions and 2 deletions.
diff --git 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 */