Requested gui improvements

app/views/success_criteria/_header.html.slim

@@ -1,16 +1,22 @@
 - edit_mode = action_name == "edit"
 summary.d-flex.align-items-start id=dom_id(success_criterion, :header)
   .content.d-flex.align-items-center
-    .result-icon.d-flex.justify-content-center class=[success_criterion_result_color_classes(success_criterion)]
+    .result-icon.d-flex.justify-content-center.mt-1 class=[success_criterion_result_color_classes(success_criterion)]
       span.h1.bi class=[success_criterion_result_icon_classes(success_criterion)]
-    h4
+    h4.mt-2
       = success_criterion.page.position
       | .
       = success_criterion.element.position
       | .
       = success_criterion.position
-      =< success_criterion.title
-  .small.badge.rounded-pill.ms-2.mt-2.sc-level class="sc-level-#{success_criterion.level.to_s.downcase}"
-    = success_criterion.level
-  - if success_criterion.test_comment.present?
-    i.bi.bi-chat.ms-2
+      span.me-2
+        =< success_criterion.title
+      
+      - if success_criterion.test_comment.present?
+        == tag.i(class: "bi bi-chat-fill me-2")
+        
+      = success_criterion_badge(success_criterion.check.external_number, extra_classes: "text-bg-info me-1")
+      
+      = success_criterion_badge(success_criterion.level, extra_classes: "sc-level sc-level-#{success_criterion.level.to_s.downcase} me-1")
+  
+