Mobile fixes and list fixes

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

core/css/apps.scss

@@ -77,7 +77,7 @@ kbd {
 	position: fixed;
 	top: $header-height;
 	left: 0;
-	z-index: 500;
+	z-index: 1000;
 	overflow-y: auto;
 	overflow-x: hidden;
 	// Do not use vh because of mobile headers
@@ -589,19 +589,20 @@ kbd {
 	display: flex;
 	// padding is included in height
 	padding-top: $header-height;
+	overflow-y: auto;
 	min-height: 100%;
 }
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
 /* Part where the content will be loaded into */
 #app-content {
-	z-index: 1000;
+	z-index: 500;
 	background-color: var(--color-main-background);
 	position: relative;
-	min-height: 100%;
 	flex-basis: 100vw;
+	min-height: 100%;
 	/* margin if navigation element is here */
-	#app-navigation  + & {
+	#app-navigation + & {
 		margin-left: $navigation-width;
 	}
 	/* no top border for first settings item */

core/css/mobile.scss

@@ -35,19 +35,16 @@
 
 	/* full width for message list on mobile */
 	.app-content-list {
-		width: 100%;
 		background: var(--color-main-background);
-		position: relative;
-		z-index: 100;
-	}
-	
-	/* since list and content are only displayed full window size
-	 * we don't ant inner scrolling
-	 */
-	#app-content-wrapper {
-		.app-content-list,
-		.app-content-detail {
-			max-height: unset;
+		flex: 1 1 100%;
+		+ .app-content-detail {
+			display: none;
+		}
+		&.showdetails {
+			display: none;
+			+ .app-content-detail {
+				display: initial;
+			}
 		}
 	}
 
@@ -59,7 +56,7 @@
 		#app-navigation-toggle-back {
 			position: fixed;
 			display: inline-block !important;
-			top: 45px;
+			top: $header-height;
 			left: 0;
 			width: 44px;
 			height: 44px;
@@ -73,18 +70,11 @@
 			transform: translateX(-100%);
 		}
 
-	/* end of media query */
-}
-	/* allow horizontal scrollbar in settings
-	otherwise user management is not usable on mobile */
-	#body-settings #app-content {
-		overflow-x: auto !important;
 	}
 
 	#app-navigation-toggle {
 		position: fixed;
 		display: inline-block !important;
-		top: $header-height;
 		left: 0;
 		width: 44px;
 		height: 44px;
@@ -132,11 +122,6 @@
 		max-width: 80%;
 	}
 
-	/* fix controls bar jumping when navigation is slid out */
-	.snapjs-left #app-navigation-toggle,
-	.snapjs-left #controls {
-		top: 0;
-	}
 	.snapjs-left table.multiselect thead {
 		top: 44px;
 	}