Fix table misalignments and tweak webhook and githook lists (#21917)

- Fix regression from #21893 which had misaligned a few tables like repo
lists and e-mails
- Bring githooks list in line with webhooks list for styling
- Change webhook list icons to just colored dots, like githook list
- Increase size of dot in webhook and githook list from 16 to 22px

Author: silverwind

templates/repo/settings/githooks.tmpl

@@ -13,10 +13,10 @@
 					{{.locale.Tr "repo.settings.githooks_desc" | Str2html}}
 				</div>
 				{{range .Hooks}}
-					<div class="item">
-						<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill"}}</span>
-						<span>{{.Name}}</span>
-						<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
+					<div class="item truncated-item-container">
+						<span class="text {{if .IsActive}}green{{else}}grey{{end}} mr-3">{{svg "octicon-dot-fill" 22}}</span>
+						<span class="text truncate f1 mr-3">{{.Name}}</span>
+						<a class="muted ui right p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
 							{{svg "octicon-pencil"}}
 						</a>
 					</div>

templates/repo/settings/webhook/base_list.tmpl

@@ -48,13 +48,7 @@
 		</div>
 		{{range .Webhooks}}
 			<div class="item truncated-item-container">
-				{{if eq .LastStatus 1}}
-					<span class="text green mr-3">{{svg "octicon-check"}}</span>
-				{{else if eq .LastStatus 2}}
-					<span class="text red mr-3">{{svg "octicon-alert"}}</span>
-				{{else}}
-					<span class="text grey mr-3">{{svg "octicon-dot-fill"}}</span>
-				{{end}}
+				<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} mr-3">{{svg "octicon-dot-fill" 22}}</span>
 				<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>

web_src/less/_repository.less

@@ -2612,12 +2612,18 @@
     }
   }
 
+  &.webhooks .list > .item:not(:first-child),
+  &.githooks .list > .item:not(:first-child) {
+    padding: .25rem 1rem;
+    margin: 12px -1rem -1rem;
+  }
+
   .list {
     > .item {
       &:not(:first-child) {
         border-top: 1px solid var(--color-secondary);
-        padding: .25rem 1rem;
-        margin: 12px -1rem -1rem;
+        padding: 1rem;
+        margin: 16px -1rem -1rem;
       }
 
       > .svg {