From 203cc0e380ae09e590c8c3864944f7bf997bd708 Mon Sep 17 00:00:00 2001
From: Warren Buckley <warren@hackmakedo.com>
Date: Wed, 19 Mar 2025 23:29:56 +0000
Subject: [PATCH] Updates dashboard to use uui-box headline property/attribute
 & place button in header-actions (#18736)

---
 .../models-builder-dashboard.element.ts       | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/models-builder/models-builder-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/models-builder/models-builder-dashboard.element.ts
index de399a97e1..89fe8d2de9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/models-builder/models-builder-dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/models-builder/models-builder-dashboard.element.ts
@@ -56,17 +56,15 @@ export class UmbModelsBuilderDashboardElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			<uui-box class="uui-text">
-				<div class="headline">
-					<h1 class="uui-h2">Models Builder</h1>
-					<uui-button
-						.state="${this._buttonStateReload}"
-						look="secondary"
-						label="Reload"
-						@click="${this._onDashboardReload}">
+			<uui-box headline="Models Builder" class="overview">
+				<uui-button
+					slot="header-actions"
+					.state="${this._buttonStateReload}"
+					look="secondary"
+					label="Reload"
+					@click="${this._onDashboardReload}">
 						Reload
 					</uui-button>
-				</div>
 				<p>Version: ${this._modelsBuilder?.version}</p>
 				<div class="models-description">
 					<p>ModelsBuilder is enabled with the following configuration:</p>
@@ -138,12 +136,6 @@ export class UmbModelsBuilderDashboardElement extends UmbLitElement {
 				padding: var(--uui-size-layout-1);
 			}
 
-			.headline {
-				display: flex;
-				justify-content: space-between;
-				align-items: flex-start;
-			}
-
 			.models-description ul {
 				list-style-type: square;
 				margin: 0;