Merge branch 'job-log' into 'master'

Update job log page UI

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/130370



Merged-by: Simon Knox <simon@gitlab.com>
Approved-by: Rudy Crespo <rcrespo@gitlab.com>
Approved-by: Simon Knox <simon@gitlab.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>

app/assets/javascripts/jobs/components/log/line_header.vue

@@ -62,12 +62,12 @@ export default {
 
 <template>
   <div
-    class="log-line collapsible-line d-flex justify-content-between ws-normal gl-align-items-flex-start"
+    class="log-line collapsible-line d-flex justify-content-between ws-normal gl-align-items-flex-start gl-relative"
     :class="{ 'gl-bg-gray-700': isHighlighted || applyHashHighlight }"
     role="button"
     @click="handleOnClick"
   >
-    <gl-icon :name="iconName" class="arrow position-absolute" />
+    <gl-icon :name="iconName" class="arrow gl-absolute gl-top-2" />
     <line-number :line-number="line.lineNumber" :path="path" />
     <span
       v-for="(content, i) in line.content"

app/assets/stylesheets/framework/job_log.scss

@@ -6,7 +6,7 @@
   word-break: break-all;
   word-wrap: break-word;
   color: color-yiq($builds-log-bg);
-  border-radius: $border-radius-small;
+  border-radius: 0 0 $border-radius-default $border-radius-default;
   min-height: 42px;
   background-color: $builds-log-bg;
 }

app/assets/stylesheets/framework/mixins.scss

@@ -263,7 +263,7 @@
 @mixin build-log-top-bar($height) {
   @include build-log-bar($height);
   position: sticky;
-  top: $calc-application-header-height;
+  top: calc(#{$calc-application-header-height} - 1px);
 }
 
 /*

app/assets/stylesheets/page_bundles/build.scss

@@ -15,6 +15,9 @@
 
   .top-bar {
     @include build-log-top-bar(50px);
+    z-index: 2;
+    border-radius: $border-radius-default $border-radius-default 0 0;
+    box-shadow: 0 -2px 0 0 var(--white);
 
     &.has-archived-block {
       top: calc(#{$calc-application-header-height} + 28px);