From 9f560ca61432b0f293571e35147d2c4665a8ea14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 6 Jun 2023 14:05:50 +1200
Subject: [PATCH] examine management

---
 .../dashboard-examine-management.element.ts   | 54 ++++++++++++++-----
 .../views/section-view-examine-overview.ts    |  1 -
 .../views/section-view-examine-searchers.ts   |  5 +-
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/dashboard-examine-management.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/dashboard-examine-management.element.ts
index 0e8c3f1179..2f4db71024 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/dashboard-examine-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/dashboard-examine-management.element.ts
@@ -1,6 +1,6 @@
 import { UmbDashboardExamineIndexElement } from './views/section-view-examine-indexers.js';
 import { UmbDashboardExamineSearcherElement } from './views/section-view-examine-searchers.js';
-import { html, css, nothing , customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, css, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -38,21 +38,51 @@ export class UmbDashboardExamineManagementElement extends UmbLitElement {
 	private _activePath = '';
 
 	render() {
-		return html` ${this._routerPath && this._activePath !== ''
-				? html` <a href=${this._routerPath}> &larr; Back to overview </a> `
-				: nothing}
-			<umb-router-slot
-				.routes=${this._routes}
-				@init=${(event: UmbRouterSlotInitEvent) => {
-					this._routerPath = event.target.absoluteRouterPath;
-				}}
-				@change=${(event: UmbRouterSlotChangeEvent) => {
-					this._activePath = event.target.localActiveViewPath || '';
-				}}></umb-router-slot>`;
+		return html`
+			<umb-body-layout clear-header>
+				${this.#renderHeader()}
+				<div id="main">
+					<umb-router-slot
+						.routes=${this._routes}
+						@init=${(event: UmbRouterSlotInitEvent) => {
+							this._routerPath = event.target.absoluteRouterPath;
+						}}
+						@change=${(event: UmbRouterSlotChangeEvent) => {
+							this._activePath = event.target.localActiveViewPath || '';
+						}}></umb-router-slot>
+				</div>
+			</umb-body-layout>
+		`;
+	}
+
+	#renderHeader() {
+		return this._routerPath && this._activePath !== ''
+			? html`
+					<div id="header" slot="header">
+						<a href=${this._routerPath}> &larr; Back to overview </a>
+					</div>
+			  `
+			: nothing;
 	}
 
 	static styles = [
 		css`
+			#header {
+				display: flex;
+				width: 100%;
+				padding: var(--uui-size-layout-1);
+			}
+			#main {
+				display: flex;
+				flex-direction: column;
+				padding: var(--uui-size-layout-1);
+			}
+			#main:not(:first-child) {
+				padding-top: var(--uui-size-1);
+			}
+			umb-body-layout {
+				--umb-header-layout-height: fit-content;
+			}
 			a {
 				color: var(--uui-color-text);
 				background: transparent;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-overview.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-overview.ts
index 8e29b74d94..8da8e9f8c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-overview.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-overview.ts
@@ -118,7 +118,6 @@ export class UmbDashboardExamineOverviewElement extends UmbLitElement {
 		css`
 			:host {
 				display: block;
-				padding: var(--uui-size-layout-1);
 			}
 
 			uui-box + uui-box {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
index 20c202422d..102fd88326 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts
@@ -1,5 +1,5 @@
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, nothing , customElement, state, query, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, state, query, property } from '@umbraco-cms/backoffice/external/lit';
 import {
 	UmbModalContext,
 	UMB_MODAL_CONTEXT_TOKEN,
@@ -223,9 +223,6 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 			:host {
 				display: block;
 			}
-			uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
 
 			uui-box p {
 				margin-top: 0;