From 16c0de803b9a0e017adec8b9f017ec79f6ba37c0 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Mon, 6 Oct 2025 07:20:25 +0200
Subject: [PATCH] Block Grid: Add a bit more spacing and align button in block
 grid areas config (#20374)

* Add a bit more spacing and align button in block grid areas config

* Remove unnecessary blank line in CSS

---------

Co-authored-by: Andy Butland <abutland73@gmail.com>
---
 .../block-grid-area-config-entry.element.ts            | 10 +++++++---
 ...operty-editor-ui-block-grid-areas-config.element.ts |  6 ++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
index 7614d755dc..3a09d321a0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
@@ -73,7 +73,7 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements
 	#renderBlock() {
 		return this._key
 			? html`
-					<span>${this._alias}</span>
+					<span class="alias">${this._alias}</span>
 					<uui-action-bar>
 						<uui-button label="edit" compact href=${this.workspacePath + 'edit/' + this._key}>
 							<uui-icon name="icon-edit"></uui-icon>
@@ -110,14 +110,18 @@ export class UmbBlockGridAreaConfigEntryElement extends UmbLitElement implements
 				background-color: var(--uui-color-disabled-standalone);
 			}
 
+			:host([drag-placeholder]) {
+				opacity: 0.2;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);
 				right: var(--uui-size-2);
 			}
 
-			:host([drag-placeholder]) {
-				opacity: 0.2;
+			.alias {
+				padding: var(--uui-size-space-4);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
index 34e767b5c0..be3f0f4556 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
@@ -159,6 +159,12 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 
 	static override styles = [
 		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-2);
+			}
+
 			.umb-block-grid__area {
 				cursor: move;
 			}