Acceptance and mobile navigation fixes

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

5 files changed, 19 insertions, 14 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 86f0e622405..bab47f4b004 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -74,13 +74,15 @@ kbd {
 /* Navigation: folder like structure */
 #app-navigation {
 	width: $navigation-width;
-	position: sticky;
+	position: fixed;
 	top: $header-height;
 	left: 0;
-	z-index: 1500;
+	z-index: 500;
 	overflow-y: auto;
 	overflow-x: hidden;
-	height: calc(100vh - #{$header-height});
+	// Do not use vh because of mobile headers
+	// are included in the calculation
+	height: calc(100% - #{$header-height});
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -170,6 +172,7 @@ kbd {
 				> ul {
 					opacity: 0;
 					max-height: 0;
+					overflow-y: hidden;
 					/* bezier override the hide/slow effect due to the 2000 max-height */
 					transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
 								opacity 250ms ease-in-out;
@@ -523,7 +526,7 @@ kbd {
 	.app-navigation-entry-deleted {
 		display: inline-flex;
 		padding-left: 44px;
-		transform: translateX(250px);
+		transform: translateX(#{$navigation-width});
 		.app-navigation-entry-deleted-description {
 			position: relative;
 			white-space: nowrap;
@@ -580,12 +583,17 @@ kbd {
 
 
 /* CONTENT  --------------------------------------------------------- */
+#content-wrapper {
+	// everything not related to content but needs to be on the window
+	// goes here (popups, tooltips...)
+	position: relative;
+}
 #content {
-	/* header height */
-	padding-top: $header-height;
 	box-sizing: border-box;
 	position: relative;
 	display: flex;
+	margin-left: $navigation-width;
+	margin-top: $header-height;
 }
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
@@ -594,7 +602,7 @@ kbd {
 	z-index: 1000;
 	background-color: var(--color-main-background);
 	position: relative;
-	min-height: calc(100vh - #{$header-height});
+	min-height: 100%;
 	flex-basis: 100vw;
 	overflow: auto;
 	/* no top border for first settings item */
diff --git a/core/css/header.scss b/core/css/header.scss
index 7aeaed92265..b7565281218 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -46,8 +46,7 @@
 	display: inline-flex;
 	position: fixed;
 	top: 0;
-	left: 0;
-	right: 0;
+	width: 100%;
 	z-index: 2000;
 	height: $header-height;
 	background-color: var(--color-primary);
diff --git a/core/css/ie.scss b/core/css/ie.scss
index ec7f51065e4..a4d2c8336ec 100644
--- a/core/css/ie.scss
+++ b/core/css/ie.scss
@@ -1,5 +1,4 @@
 
-#app-navigation,
 #app-sidebar {
 	position: fixed !important;
 }
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index b0f85250493..8a7b323a844 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -20,7 +20,7 @@
 
 	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
 	#app-navigation {
-		transform: translateX(-250px);
+		transform: translateX(-#{$navigation-width});
 	}
 	.snapjs-left {
 		#app-navigation {
@@ -28,8 +28,8 @@
 		}
 	}
 
-	#app-content {
-		margin-left: -$navigation-width;
+	#content {
+		margin-left: 0;
 	}
 
 
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 9652b02e9d2..3ca0d804443 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -89,7 +89,6 @@ body {
 	line-height: 1.6em;
 	font-family: var(--font-face);
 	color: var(--color-main-text);
-	height: auto;
 }
 
 .two-factor-header {