From 4330a99830ad22610c530b778a7991cc22c37e10 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Mon, 6 Oct 2025 18:12:43 +0200
Subject: [PATCH] Block Grid: Styling of group drag with handle (#20361)

* Adjustment of block grid group drag with handle

* Adjust input, handle and delete button
---
 ...i-block-grid-type-configuration.element.ts | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
index 62ee63e5d5..151f396a19 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
@@ -232,35 +232,39 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 
 	#renderGroupInput(groupKey: string, groupName?: string) {
 		return html`<div class="group-handle">
+			<uui-icon name="icon-grip"></uui-icon>
 			<uui-input
-				auto-width
 				label="Group"
 				.value=${groupName ?? ''}
 				@change=${(e: UUIInputEvent) => this.#onGroupNameChange(e, groupKey)}>
-				<uui-button compact slot="append" label="delete" @click=${() => this.#deleteGroup(groupKey)}>
-					<uui-icon name="icon-trash"></uui-icon>
-				</uui-button>
 			</uui-input>
+			<uui-button
+				compact
+				label=${this.localize.term('general_delete')}
+				look="outline"
+				@click=${() => this.#deleteGroup(groupKey)}>
+				<uui-icon name="icon-trash"></uui-icon>
+			</uui-button>
 		</div>`;
 	}
 
 	static override styles = [
 		UmbTextStyles,
 		css`
-			uui-input:not(:hover, :focus) {
-				border: 1px solid transparent;
-			}
-			uui-input:not(:hover, :focus) uui-button {
-				opacity: 0;
-			}
-
 			.group-handle {
-				padding: var(--uui-size-1);
+				display: flex;
+				align-items: center;
+				padding: var(--uui-size-3) var(--uui-size-1);
 				margin-top: var(--uui-size-6);
 				margin-bottom: var(--uui-size-4);
+				gap: var(--uui-size-1);
 				cursor: grab;
 			}
 
+			.group-handle:active {
+				cursor: grabbing;
+			}
+
 			.group-handle:hover {
 				background-color: var(--uui-color-divider);
 				border-radius: var(--uui-border-radius);
@@ -269,6 +273,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 			.group:has([drag-placeholder]) {
 				opacity: 0.2;
 			}
+
+			uui-input {
+				flex: 1;
+			}
 		`,
 	];
 }