Navigation flex magic

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 12 insertions, 20 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index f23d1b420fd..4bf547f3473 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -101,7 +101,7 @@ kbd {
 		box-sizing: border-box;
 		> li {
 			display: inline-flex;
-			justify-content: space-between;
+			flex-wrap: wrap;
 			&:focus,
 			&:hover,
 			&.active,
@@ -112,6 +112,15 @@ kbd {
 					box-shadow: inset 2px 0 $color-primary;
 				}
 			}
+			/* Second level nesting for lists */
+			> ul {
+				display: none;
+				flex: 1 0 100%;
+				> li {
+					display: inline-flex;
+					flex-wrap: wrap;
+				}
+			}
 		}
 	}
 	li {
@@ -134,6 +143,7 @@ kbd {
 			text-overflow: ellipsis;
 			color: $color-main-text;
 			opacity: .57;
+			flex: 1 1 0;
 			&:first-child img {
 			    margin-bottom: -3px;
 			    margin-right: 11px;
@@ -149,22 +159,6 @@ kbd {
 			}
 		}
 	}
-	> {
-		/* Second level nesting for lists */
-		ul ul {
-			display: none;
-			li > a {
-				padding-left: 32px;
-			}
-		}
-		.with-icon ul li {
-			> a,
-			&.app-navigation-entry-loading > a {
-				padding-left: 68px;
-				background-position: 44px center;
-			}
-		}
-	}
 	&.hidden {
 		display: none;
 	}
@@ -289,7 +283,7 @@ kbd {
 	 * App navigation utils, buttons and counters for drop down menu
 	 */
 	.app-navigation-entry-utils {
-		flex-shrink: 0;
+		flex: 0 1 auto;
 		ul {
 			display: flex !important;
 			align-items: center;
@@ -322,10 +316,8 @@ kbd {
 		}
 		.app-navigation-entry-utils-counter {
 			overflow: hidden;
-			text-overflow: hidden;
 			text-align: right;
 			font-size: 9pt;
-			width: 38px;
 			line-height: 44px;
 			padding: 0 12px; /* Same padding as all li > a in the app-navigation */
 		}