DEV: Admin webhooks interface issues (#19360)

1. The events table had broken styling, making each row overflow
2. It had confusing routes: `/:id` for "edit" and `/:id/events` for "show" (now it's `/:id/edit` and `/:id` respectively)
3. There previously was an unused backend action (`#edit`) - now it is used (and `web_hooks/:id/events` route has been removed)
4. There was outdated/misplaced/duplicated CSS
5. And more

app/assets/stylesheets/common/admin/api.scss

@@ -265,14 +265,21 @@ table.api-keys {
   }
 }
 
-.web-hook-direction {
-  a,
-  button {
-    margin-right: 10px;
-  }
+.admin-webhooks__summary {
+  margin-bottom: 1rem;
+}
+
+.admin-webhooks__edit-button,
+.admin-webhooks__delete-button {
+  font-size: var(--font-0-rem);
 }
 
 .web-hook-events {
+  .heading-container {
+    width: 100%;
+    background-color: var(--primary-low);
+  }
+
   li {
     padding: 2px 0;
   }
@@ -283,6 +290,13 @@ table.api-keys {
     overflow-y: auto;
     overflow-x: hidden;
   }
+  .col.heading {
+    font-weight: bold;
+    padding: 4px 0;
+  }
+  .col.heading.actions {
+    padding: 4px 0;
+  }
   .col.first {
     width: 90px;
   }
@@ -296,18 +310,14 @@ table.api-keys {
     width: 250px;
   }
   .col.actions {
-    width: 455px;
     padding-top: 0;
     a {
       text-decoration: underline;
     }
   }
-  .col.heading.actions {
-    padding: 4px 0;
-  }
   .details {
     display: block;
-    margin-top: 10px;
+    margin-top: 1rem;
   }
   label {
     font-size: var(--font-0);
@@ -317,10 +327,13 @@ table.api-keys {
   }
 }
 
+.webhook-events__ping-button {
+  margin-bottom: 1rem;
+}
+
 .web-hook-events-listing {
-  margin-top: 15px;
   .alert {
-    margin: 15px 0 0 0;
+    margin: 0;
   }
 }