From e9429cfe44507e028ab714c9e2bc1740c746e004 Mon Sep 17 00:00:00 2001
From: Jakob Bagterp <25110864+jakob-bagterp@users.noreply.github.com>
Date: Thu, 4 Feb 2021 23:54:01 +0100
Subject: [PATCH] Separate remove button and label for settings and styles in
 Grid Layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It's inconvenient that the click area for the remove button laps over the label of settings and styles in the Grid Layout property editor. Simply as the editor may remove the style/setting by accident – and especially since there isn't an undo option.

Known issue: Linebreak of long text labels doesn't appear pretty, but this is cosmetic and can be fixed.
---
 .../src/views/propertyeditors/grid/grid.prevalues.html     | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
index 9bf32675e3..f1f1a90ef4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
@@ -117,11 +117,10 @@
 
                 <li ng-repeat="configValue in model.value.config">
                     <i class="icon icon-navigation handle" aria-hidden="true"></i>
-
                     <button type="button" class="btn-link" ng-click="vm.removeConfigValue(model.value.config, $index)">
                         <i class="icon icon-delete red" aria-hidden="true"></i>
-                        {{configValue.label}}
                     </button>
+                    <span>{{configValue.label}}</span>
                 </li>
             </ul>
 
@@ -145,12 +144,10 @@
 
                 <li ng-repeat="style in model.value.styles">
                     <i class="icon icon-navigation handle" aria-hidden="true"></i>
-
                     <button type="button" class="btn-link" ng-click="vm.removeConfigValue(model.value.styles, $index)">
                         <i class="icon icon-delete red" aria-hidden="true"></i>
-                        {{style.label}}
                     </button>
-
+                    <span>{{style.label}}</span>
                 </li>
             </ul>