From 810b7d6de38bbae94b3f3ab47c872928e0130580 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 16 Jan 2025 21:05:03 +0100
Subject: [PATCH] remove double box containers + adjust styling

---
 ...ment-history-workspace-info-app.element.ts | 14 ++--
 ...-references-workspace-view-info.element.ts | 83 +++++++++----------
 ...cument-links-workspace-info-app.element.ts | 12 ++-
 .../document-workspace-view-info.element.ts   |  4 +-
 4 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts
index ec900a351d..208ead1d2e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/info-app/document-history-workspace-info-app.element.ts
@@ -99,19 +99,18 @@ export class UmbDocumentHistoryWorkspaceInfoAppElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			<uui-box headline=${this.localize.term('general_history')}>
-				<umb-extension-with-api-slot
+			<umb-extension-with-api-slot
 				slot="header-actions"
 				type="entityAction"
-				.filter=${(manifest: ManifestEntityAction) => this.#allowedActions.has(manifest.alias)}></umb-extension-with-api-slot>
-			</uui-button>
+				.filter=${(manifest: ManifestEntityAction) =>
+					this.#allowedActions.has(manifest.alias)}></umb-extension-with-api-slot>
+
 			${when(
 				this._items,
 				() => this.#renderHistory(),
 				() => html`<div id="loader"><uui-loader></uui-loader></div>`,
 			)}
 			${this.#renderPagination()}
-		</uui-box>
 		`;
 	}
 
@@ -163,6 +162,11 @@ export class UmbDocumentHistoryWorkspaceInfoAppElement extends UmbLitElement {
 	static override styles = [
 		UmbTextStyles,
 		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-space-4) var(--uui-size-space-5);
+			}
+
 			#loader {
 				display: flex;
 				justify-content: center;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/reference/info-app/document-references-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/reference/info-app/document-references-workspace-view-info.element.ts
index 682d54114c..789efc0d63 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/reference/info-app/document-references-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/reference/info-app/document-references-workspace-view-info.element.ts
@@ -137,48 +137,46 @@ export class UmbDocumentReferencesWorkspaceInfoAppElement extends UmbLitElement
 	override render() {
 		if (!this._items?.length) return nothing;
 		return html`
-			<uui-box headline=${this.localize.term('references_labelUsedByItems')} style="--uui-box-default-padding:0">
-				<uui-table>
-					<uui-table-head>
-						<uui-table-head-cell></uui-table-head-cell>
-						<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
-						<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
-						<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
-						<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
-					</uui-table-head>
-					${repeat(
-						this._items,
-						(item) => item.id,
-						(item) => html`
-							<uui-table-row>
-								<uui-table-cell style="text-align:center;">
-									<umb-icon name=${this.#getIcon(item)}></umb-icon>
-								</uui-table-cell>
-								<uui-table-cell class="link-cell">
-									${when(
-										isDocumentReference(item),
-										() => html`
-											<uui-button
-												label="${this.localize.term('general_edit')} ${item.name}"
-												href="${this._editDocumentPath}edit/${item.id}">
-												${item.name}
-											</uui-button>
-										`,
-										() => item.name,
-									)}
-								</uui-table-cell>
-								<uui-table-cell>
-									${this.#getPublishedStatus(item)
-										? this.localize.term('content_published')
-										: this.localize.term('content_unpublished')}
-								</uui-table-cell>
-								<uui-table-cell>${this.#getContentTypeName(item)}</uui-table-cell>
-								<uui-table-cell>${this.#getContentType(item)}</uui-table-cell>
-							</uui-table-row>
-						`,
-					)}
-				</uui-table>
-			</uui-box>
+			<uui-table>
+				<uui-table-head>
+					<uui-table-head-cell></uui-table-head-cell>
+					<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
+					<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
+					<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
+					<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
+				</uui-table-head>
+				${repeat(
+					this._items,
+					(item) => item.id,
+					(item) => html`
+						<uui-table-row>
+							<uui-table-cell style="text-align:center;">
+								<umb-icon name=${this.#getIcon(item)}></umb-icon>
+							</uui-table-cell>
+							<uui-table-cell class="link-cell">
+								${when(
+									isDocumentReference(item),
+									() => html`
+										<uui-button
+											label="${this.localize.term('general_edit')} ${item.name}"
+											href="${this._editDocumentPath}edit/${item.id}">
+											${item.name}
+										</uui-button>
+									`,
+									() => item.name,
+								)}
+							</uui-table-cell>
+							<uui-table-cell>
+								${this.#getPublishedStatus(item)
+									? this.localize.term('content_published')
+									: this.localize.term('content_unpublished')}
+							</uui-table-cell>
+							<uui-table-cell>${this.#getContentTypeName(item)}</uui-table-cell>
+							<uui-table-cell>${this.#getContentType(item)}</uui-table-cell>
+						</uui-table-row>
+					`,
+				)}
+			</uui-table>
 			${this.#renderReferencePagination()}
 		`;
 	}
@@ -202,6 +200,7 @@ export class UmbDocumentReferencesWorkspaceInfoAppElement extends UmbLitElement
 			:host {
 				display: contents;
 			}
+
 			uui-table-cell:not(.link-cell) {
 				color: var(--uui-color-text-alt);
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts
index 21f09008aa..a7723cd801 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/url/info-app/document-links-workspace-info-app.element.ts
@@ -155,13 +155,11 @@ export class UmbDocumentLinksWorkspaceInfoAppElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			<uui-box headline=${this.localize.term('general_links')}>
-				${when(
-					this._loading,
-					() => this.#renderLoading(),
-					() => this.#renderContent(),
-				)}
-			</uui-box>
+			${when(
+				this._loading,
+				() => this.#renderLoading(),
+				() => this.#renderContent(),
+			)}
 		`;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 15521d052b..ff740f699b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -194,7 +194,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	#renderInfoApp(initializer: UmbExtensionElementInitializer<ManifestWorkspaceInfoApp>) {
 		const headline = initializer.manifest?.meta.label;
 		return html`
-			<uui-box headline=${ifDefined(headline ? this.localize.string(headline) : undefined)}>
+			<uui-box
+				headline=${ifDefined(headline ? this.localize.string(headline) : undefined)}
+				style="--uui-box-default-padding:0">
 				${initializer.component}</uui-box
 			>
 		`;