Deployment history timeline styling (#17524)

ui/app/components/job-status/deployment-history.hbs

@@ -28,6 +28,7 @@
     {{/unless}}
   </header>
   {{#unless this.isHidden}}
+  <div class="timeline-container">
     <ol class="timeline">
       {{#each this.history as |deployment-log|}}
         <li class="timeline-object {{if (eq deployment-log.exitCode 1) "error"}}">
@@ -71,5 +72,6 @@
         {{/if}}
       {{/each}}
     </ol>
+</div>
   {{/unless}}
 </div>

ui/app/styles/components/job-status-panel.scss

@@ -413,33 +413,33 @@
         max-width: unset;
       }
     }
-    & > ol {
+    .timeline-container {
       max-height: 300px;
       overflow-y: auto;
-    }
-    & > ol > li {
-      @for $i from 1 through 50 {
-        &:nth-child(#{$i}) {
-          animation-name: historyItemSlide;
-          animation-duration: 0.2s;
-          animation-fill-mode: both;
-          animation-delay: 0.1s + (0.05 * $i);
+      & > ol > li {
+        @for $i from 1 through 50 {
+          &:nth-child(#{$i}) {
+            animation-name: historyItemSlide;
+            animation-duration: 0.2s;
+            animation-fill-mode: both;
+            animation-delay: 0.1s + (0.05 * $i);
+          }
+
+          &:nth-child(#{$i}) > div {
+            animation-name: historyItemShine;
+            animation-duration: 1s;
+            animation-fill-mode: both;
+            animation-delay: 0.1s + (0.05 * $i);
+          }
         }
 
-        &:nth-child(#{$i}) > div {
-          animation-name: historyItemShine;
-          animation-duration: 1s;
-          animation-fill-mode: both;
-          animation-delay: 0.1s + (0.05 * $i);
+        & > div {
+          gap: 0.5rem;
+        }
+        &.error > div {
+          border: 1px solid $danger;
+          background: lighten($danger, 45%);
         }
-      }
-
-      & > div {
-        gap: 0.5rem;
-      }
-      &.error > div {
-        border: 1px solid $danger;
-        background: rgba($danger, 0.1);
       }
     }
   }

ui/app/styles/components/timeline.scss

@@ -54,6 +54,10 @@
   .timeline-object {
     margin-bottom: 1em;
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     > .boxed-section {
       margin-bottom: 0;
     }