Fixes z-index and margins of archived alert

app/assets/javascripts/jobs/components/job_app.vue

@@ -240,14 +240,19 @@ export default {
         <div
           v-if="job.archived"
           ref="sticky"
-          class="js-archived-job prepend-top-default archived-sticky sticky-top"
+          class="js-archived-job prepend-top-default archived-job"
+          :class="{ 'sticky-top border-bottom-0': hasTrace }"
         >
           <icon name="lock" class="align-text-bottom" />
 
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!-- job log -->
-        <div v-if="hasTrace" class="build-trace-container">
+        <div
+          v-if="hasTrace"
+          class="build-trace-container"
+          :class="{ 'prepend-top-default': !job.archived }"
+        >
           <log-top-bar
             :class="{
               'sidebar-expanded': isSidebarOpen,

app/assets/stylesheets/pages/builds.scss

@@ -55,16 +55,16 @@
     @include build-trace();
   }
 
-  .archived-sticky {
+  .archived-job {
     top: $header-height;
     border-radius: 2px 2px 0 0;
     color: $orange-600;
     background-color: $orange-100;
     border: 1px solid $border-gray-normal;
-    border-bottom: 0;
     padding: 3px 12px;
     margin: auto;
     align-items: center;
+    z-index: 1;
 
     .with-performance-bar & {
       top: $header-height + $performance-bar-height;

changelogs/unreleased/56019-archived-stuck.yml

+---
+title: Fixes z-index and margins of archived alert in job page
+merge_request:
+author:
+type: fixed