From d79db57d88dbf1dee0bb616066afd8657755af97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 23 Aug 2022 13:57:57 +0200
Subject: [PATCH 1/3] Implement new container layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NcAppContent/NcAppContent.vue       |  6 +++---
 src/components/NcAppNavigation/NcAppNavigation.vue |  3 ++-
 src/components/NcAppSidebar/NcAppSidebar.vue       |  3 ++-
 src/components/NcContent/NcContent.vue             | 14 +++++++++++---
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
index 20f6c6cf08..0e4874f96b 100644
--- a/src/components/NcAppContent/NcAppContent.vue
+++ b/src/components/NcAppContent/NcAppContent.vue
@@ -323,14 +323,14 @@ export default {
 <style lang="scss" scoped>
 
 .app-content {
-	position: relative;
+	position: initial;
 	z-index: 1000;
 	flex-basis: 100vw;
-	min-width: 0;
-	min-height: 100%;
+	height: 100%;
 	// Overriding server styles TODO: cleanup!
 	margin: 0 !important;
 	background-color: var(--color-main-background);
+	overflow: scroll;
 
 	// Variables
 	// the whitespace between the topbar content and its edges
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index be97e91269..aa686e8451 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -149,7 +149,7 @@ export default {
 	padding: 4px;
 	// Above appcontent
 	z-index: 1800;
-	height: calc(100vh - #{$header-height});
+	height: 100%;
 	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -162,6 +162,7 @@ export default {
 	background-color:  var(--color-main-background-blur, var(--color-main-background));
 	-webkit-backdrop-filter: var(--filter-background-blur, none);
 	backdrop-filter: var(--filter-background-blur, none);
+
 	&--close {
 		margin-left: - $navigation-width;
 		transform: translateX(-100%);
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index e5b827a438..7aff07b241 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -639,9 +639,10 @@ $top-buttons-spacing: 6px;
 	width: 27vw;
 	min-width: $sidebar-min-width;
 	max-width: $sidebar-max-width;
-	height: calc(100vh - var(--header-height));
+	height: 100%;
 	border-left: 1px solid var(--color-border);
 	background: var(--color-main-background);
+
 	.app-sidebar-header {
 		> .app-sidebar__close {
 			position: absolute;
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index eddf66fcdf..ec7dbd62ac 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -81,10 +81,18 @@ export default {
 <style lang="scss" scoped>
 .content {
 	box-sizing: border-box;
-	position: relative;
+	margin: var(--body-container-margin);
+	margin-top: 50px;
 	display: flex;
-	padding-top: 50px;
-	min-height: 100%;
+	width: calc(100% - var(--body-container-margin) * 2);
+	height: var(--body-height);
+	overflow: hidden;
+	padding: 0;
+
+	&:not(.with-sidebar--full) {
+		position: fixed;
+	}
+
 	:deep(*) {
 		box-sizing: border-box;
 	}

From e2e2da0c367450d3d04a38a9268b0236cb89f4d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 29 Aug 2022 18:52:34 +0200
Subject: [PATCH 2/3] Add border radius
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NcContent/NcContent.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index ec7dbd62ac..d4e2f4a7be 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -85,6 +85,7 @@ export default {
 	margin-top: 50px;
 	display: flex;
 	width: calc(100% - var(--body-container-margin) * 2);
+	border-radius: var(--body-container-radius);
 	height: var(--body-height);
 	overflow: hidden;
 	padding: 0;

From f664314fe49c4bcb048f268a6a27cb80c9b0d064 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 31 Aug 2022 17:19:10 +0200
Subject: [PATCH 3/3] Fix app content list layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NcAppContent/NcAppContent.vue      | 15 ++++++++++++---
 .../NcAppNavigation/NcAppNavigation.vue           |  9 ++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
index 0e4874f96b..1499d39a35 100644
--- a/src/components/NcAppContent/NcAppContent.vue
+++ b/src/components/NcAppContent/NcAppContent.vue
@@ -71,7 +71,7 @@ The list size must be between the min and the max width value.
 </docs>
 
 <template>
-	<main id="app-content-vue" class="app-content no-snapper">
+	<main id="app-content-vue" class="app-content no-snapper" :class="{ 'app-content--has-list': hasList }">
 		<template v-if="hasList">
 			<!-- Mobile view does not allow resizeable panes -->
 			<div v-if="isMobile"
@@ -330,13 +330,22 @@ export default {
 	// Overriding server styles TODO: cleanup!
 	margin: 0 !important;
 	background-color: var(--color-main-background);
-	overflow: scroll;
+
+	&:not(.app-content--has-list) {
+		overflow: auto;
+	}
 
 	// Variables
 	// the whitespace between the topbar content and its edges
 	--topbar-margin: $topbar-margin;
 }
 
+.app-content-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
 // Mobile list/details handling
 .app-content-wrapper--mobile {
 	&.app-content-wrapper--show-list :deep() {
@@ -377,7 +386,7 @@ export default {
 		}
 
 		&-details {
-			overflow-y: scroll;
+			overflow-y: auto;
 
 			@media only screen and (max-width: $breakpoint-mobile) {
 				min-width: 100%;
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index aa686e8451..1a139e1db7 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -142,9 +142,8 @@ export default {
 	will-change: transform;
 	transition: transform var(--animation-quick), margin var(--animation-quick);
 	width: $navigation-width;
-	position: sticky;
-	position: -webkit-sticky;
-	top: $header-height;
+	position: relative;
+	top: 0;
 	left: 0;
 	padding: 4px;
 	// Above appcontent
@@ -164,8 +163,8 @@ export default {
 	backdrop-filter: var(--filter-background-blur, none);
 
 	&--close {
-		margin-left: - $navigation-width;
 		transform: translateX(-100%);
+		position: absolute;
 	}
 
 	//list of navigation items
@@ -185,7 +184,7 @@ export default {
 // When on mobile, we make the navigation slide over the appcontent
 @media only screen and (max-width: $breakpoint-mobile) {
 	.app-navigation:not(.app-navigation--close) {
-		margin-left: - $navigation-width;
+		position: absolute;
 	}
 }