From 9396dfa122239bee6b6686ee74bf51d58e9afb76 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Fri, 3 Oct 2025 00:05:33 +0200
Subject: [PATCH 1/2] Adjustment of block grid group drag with handle

---
 ...erty-editor-ui-block-grid-type-configuration.element.ts | 7 +++++++
 1 file changed, 7 insertions(+)

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 62ee63e5d53b..edba82d89474 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,6 +232,7 @@ 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"
@@ -255,12 +256,18 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 			}
 
 			.group-handle {
+				display: flex;
+				align-items: center;
 				padding: var(--uui-size-1);
 				margin-top: var(--uui-size-6);
 				margin-bottom: var(--uui-size-4);
 				cursor: grab;
 			}
 
+			.group-handle:active {
+				cursor: grabbing;
+			}
+
 			.group-handle:hover {
 				background-color: var(--uui-color-divider);
 				border-radius: var(--uui-border-radius);

From 494704fa80e59877e815d76cec110beed81cda01 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Fri, 3 Oct 2025 00:29:57 +0200
Subject: [PATCH 2/2] Adjust input, handle and delete button

---
 ...i-block-grid-type-configuration.element.ts | 25 ++++++++++---------
 1 file changed, 13 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 edba82d89474..151f396a193a 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
@@ -234,33 +234,30 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 		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 {
 				display: flex;
 				align-items: center;
-				padding: var(--uui-size-1);
+				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;
 			}
 
@@ -276,6 +273,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 			.group:has([drag-placeholder]) {
 				opacity: 0.2;
 			}
+
+			uui-input {
+				flex: 1;
+			}
 		`,
 	];
 }