Fixes: U4-7653 List view - can't remove custom layouts

src/Umbraco.Web.UI.Client/src/less/listview.less

@@ -309,10 +309,9 @@
    text-decoration: none;
 }
 
-.list-view-layout__remove-layout {
-   flex: 2;
-   text-align: right;
-   font-size: 20px;
+.list-view-layout__remove {
+    position: relative;
+    cursor: pointer;
 }
 
 .list-view-add-layout {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js

@@ -24,6 +24,8 @@
       };
 
       vm.addLayout = addLayout;
+      vm.showPrompt = showPrompt;
+      vm.hidePrompt = hidePrompt;
       vm.removeLayout = removeLayout;
       vm.openIconPicker = openIconPicker;
 
@@ -48,6 +50,14 @@
 
       }
 
+      function showPrompt(layout) {
+          layout.deletePrompt = true;
+      }
+
+      function hidePrompt(layout) {
+          layout.deletePrompt = false;
+      }
+
       function removeLayout($index, layout) {
          $scope.model.value.splice($index, 1);
       }

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html

@@ -30,7 +30,15 @@
 
          <div>
             <input ng-if="layout.isSystem === 1" type="checkbox" ng-model="layout.selected" />
-            <umb-confirm-delete ng-if="layout.isSystem !== 1" confirm-action="vm.removeLayout($index, layout)"></umbraco-confirm-delete>
+            <div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
+                <i class="icon-trash" ng-click="vm.showPrompt(layout)"></i>
+                <umb-confirm-action
+                    ng-if="layout.deletePrompt"
+                    direction="left"
+                    on-confirm="vm.removeLayout($index, layout)"
+                    on-cancel="vm.hidePrompt(layout)">
+                </umb-confirm-action>
+            </div>
          </div>
 
       </div>