From 9ae9140a1bc374f0f2f76eed11946b83da6402eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Thu, 6 Oct 2022 16:11:13 +0200
Subject: [PATCH] fixed scrolling

---
 .../components/backoffice-main.element.ts     |  3 +++
 .../editors/user/editor-user.element.ts       |  1 +
 .../shared/section-dashboards.element.ts      |  8 +++----
 .../sections/shared/section-main.element.ts   |  5 ++++
 .../sections/shared/section.element.ts        |  4 ++++
 .../editor-view-users-overview.element.ts     |  9 ++++++++
 .../grid/editor-view-users-grid.element.ts    | 23 +++++++++++++------
 .../views/users/section-view-users.element.ts |  9 +++++++-
 8 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts
index 234f88c835..76dd9a45f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts
@@ -23,6 +23,9 @@ export class UmbBackofficeMain extends UmbContextProviderMixin(UmbContextConsume
 				height: 100%;
 				overflow: hidden;
 			}
+			router-slot {
+				height: 100%;
+			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts
index 0ad347b83c..110c1efa7c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/user/editor-user.element.ts
@@ -18,6 +18,7 @@ export class UmbEditorUserElement extends UmbContextProviderMixin(UmbContextCons
 		css`
 			:host {
 				display: block;
+				height: 100%;
 			}
 
 			#main {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts
index 3f2ec93220..1b50cbd9b5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-dashboards.element.ts
@@ -16,7 +16,9 @@ export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) {
 		UUITextStyles,
 		css`
 			:host {
-				display: block;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
 				width: 100%;
 			}
 
@@ -31,10 +33,6 @@ export class UmbSectionDashboards extends UmbContextConsumerMixin(LitElement) {
 				padding: var(--uui-size-space-5);
 				display: block;
 			}
-
-			#scroll-container {
-				height: 500px; // TODO: This is a temporary fix to get scrolling to work
-			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-main.element.ts
index 664add7cbb..5a63d970d2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section-main.element.ts
@@ -11,6 +11,11 @@ export class UmbSectionMain extends LitElement {
 				flex: 1 1 auto;
 				height: 100%;
 			}
+			slot {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
index 353cc2fad4..6918851c3a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
@@ -34,6 +34,10 @@ export class UmbSectionElement extends UmbContextConsumerMixin(LitElement) {
 				border-left: 1px solid var(--uui-color-border);
 				border-right: 1px solid var(--uui-color-border);
 			}
+			#router-slot {
+				overflow: auto;
+				height: 100%;
+			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-overview.element.ts
index fd6c2a6ae0..8f0b6f58ba 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-overview.element.ts
@@ -17,6 +17,12 @@ export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(L
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
 			#sticky-top {
 				position: sticky;
 				top: -1px;
@@ -64,6 +70,9 @@ export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(L
 				color: inherit;
 				text-decoration: none;
 			}
+			router-slot {
+				overflow: hidden;
+			}
 		`,
 	];
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/editor-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/editor-view-users-grid.element.ts
index 43d96c1001..2c117e1fda 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/editor-view-users-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/editor-view-users-grid.element.ts
@@ -14,10 +14,17 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
 			#user-grid {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 				gap: var(--uui-size-space-4);
+				padding: var(--uui-size-space-4);
 			}
 
 			uui-card-user {
@@ -130,13 +137,15 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 
 	render() {
 		return html`
-			<div id="user-grid">
-				${repeat(
-					this._users,
-					(user) => user.key,
-					(user) => this.renderUserCard(user)
-				)}
-			</div>
+			<uui-scroll-container>
+				<div id="user-grid">
+					${repeat(
+						this._users,
+						(user) => user.key,
+						(user) => this.renderUserCard(user)
+					)}
+				</div>
+			</uui-scroll-container>
 		`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/section-view-users.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/section-view-users.element.ts
index b5cb427787..143bb1d8cf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/section-view-users.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/section-view-users.element.ts
@@ -17,7 +17,14 @@ import UmbEditorEntityElement from '../../../../editors/shared/editor-entity/edi
 
 @customElement('umb-section-view-users')
 export class UmbSectionViewUsersElement extends UmbContextProviderMixin(LitElement) {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				height: 100%;
+			}
+		`,
+	];
 
 	@state()
 	private _routes: IRoute[] = [