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 <[email protected]>

Author: bjarnef

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);
 			}
 		`,
 	];

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;
 			}