Use badge for status

For rounded corners

app/assets/stylesheets/framework/blocks.scss

@@ -69,7 +69,6 @@
   &.footer-block {
     margin-top: $gl-padding-24;
     border-bottom: 0;
-    margin-bottom: -$gl-padding;
   }
 
   &.content-component-block {

app/models/hooks/web_hook_log.rb

@@ -23,6 +23,10 @@ class WebHookLog < ApplicationRecord
     response_status =~ /^2/
   end
 
+  def internal_error?
+    response_status == WebHookService::InternalErrorResponse::ERROR_MESSAGE
+  end
+
   private
 
   def obfuscate_basic_auth

app/services/web_hook_service.rb

@@ -2,12 +2,14 @@
 
 class WebHookService
   class InternalErrorResponse
+    ERROR_MESSAGE = 'internal error'
+
     attr_reader :body, :headers, :code
 
     def initialize
       @headers = Gitlab::HTTP::Response::Headers.new({})
       @body = ''
-      @code = 'internal error'
+      @code = ERROR_MESSAGE
     end
   end
 

app/views/projects/hook_logs/_index.html.haml

-.row.prepend-top-default.append-bottom-default
+.row.prepend-top-32.append-bottom-default
   .col-lg-3
     %h4.prepend-top-0
       Recent Deliveries

app/views/shared/hook_logs/_status_label.html.haml

 - label_status = hook_log.success? ? 'badge-success' : 'badge-danger'
-%span{ class: "label #{label_status}" }
-  = hook_log.response_status
+%span{ class: "badge #{label_status}" }
+  = hook_log.internal_error? ? _('Error') : hook_log.response_status

changelogs/unreleased/118791-clean-up-spacing-on-recent-deliveries-section-of-project-service-s.yml

+---
+title: Fix spacing and UI on Recent Deliveries section of Project Services
+merge_request: 22666
+author:
+type: fixed

spec/models/hooks/web_hook_log_spec.rb

@@ -69,4 +69,20 @@ describe WebHookLog do
       it { expect(web_hook_log.success?).to be_falsey }
     end
   end
+
+  describe '#internal_error?' do
+    let(:web_hook_log) { build_stubbed(:web_hook_log, response_status: status) }
+
+    context 'when response status is not an internal error' do
+      let(:status) { '200' }
+
+      it { expect(web_hook_log.internal_error?).to be_falsey }
+    end
+
+    context 'when response status is an internal error' do
+      let(:status) { 'internal error' }
+
+      it { expect(web_hook_log.internal_error?).to be_truthy }
+    end
+  end
 end