Webhook list enhancements (#21893)

templates/admin/queue.tmpl

@@ -161,7 +161,7 @@
 						<td>{{DateFmtLong .Start}}</td>
 						<td>{{if .HasTimeout}}{{DateFmtLong .Timeout}}{{else}}-{{end}}</td>
 						<td>
-							<a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}"><span class="text red" title="{{$.locale.Tr "remove"}}">{{svg "octicon-trash"}}</span></a>
+							<a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}" title="{{$.locale.Tr "remove"}}">{{svg "octicon-trash"}}</a>
 						</td>
 					</tr>
 					{{else}}

templates/repo/settings/webhook/base_list.tmpl

@@ -55,11 +55,9 @@
 				{{else}}
 					<span class="text grey mr-3">{{svg "octicon-dot-fill"}}</span>
 				{{end}}
-				<a class="text truncate" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
-				<div class="ui right" style="display: inline-flex">
-					<span class="text blue px-2"><a href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
-					<span class="text red px-2"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a></span>
-				</div>
+				<a class="text truncate f1 mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
+				<a class="muted p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
+				<a class="delete-button p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>
 			</div>
 		{{end}}
 	</div>

web_src/less/_admin.less

@@ -3,8 +3,8 @@
     > .item {
       &:not(:first-child) {
         border-top: 1px solid var(--color-secondary);
-        padding: 1rem;
-        margin: 15px -1rem -1rem;
+        padding: .25rem 1rem;
+        margin: 12px -1rem -1rem;
       }
     }
   }

web_src/less/_base.less

@@ -307,6 +307,11 @@ a.muted:hover [class*="color-text"],
   color: var(--color-primary);
 }
 
+.delete-button,
+.delete-button:hover {
+  color: var(--color-red);
+}
+
 a.label,
 .repository-menu a,
 .ui.search .results a,
@@ -2571,6 +2576,7 @@ table th[data-sortt-desc] {
 
 .truncated-item-container {
   display: flex !important;
+  align-items: center;
 }
 
 .ellipsis-button {

web_src/less/_repository.less

@@ -2616,8 +2616,8 @@
     > .item {
       &:not(:first-child) {
         border-top: 1px solid var(--color-secondary);
-        padding: 1rem;
-        margin: 15px -1rem -1rem;
+        padding: .25rem 1rem;
+        margin: 12px -1rem -1rem;
       }
 
       > .svg {