Fixes CSS leaks for job log

Renames existing classes in the job log
refactor

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

@@ -9,5 +9,7 @@ export default {
 };
 </script>
 <template>
-  <div class="duration rounded align-self-start px-2 ml-2 flex-shrink-0">{{ duration }}</div>
+  <div class="log-duration-badge rounded align-self-start px-2 ml-2 flex-shrink-0">
+    {{ duration }}
+  </div>
 </template>

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

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <template>
-  <div class="line">
+  <div class="log-line">
     <line-number :line-number="line.lineNumber" :path="path" />
     <span v-for="(content, i) in line.content" :key="i" :class="content.style">{{
       content.text

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

@@ -43,7 +43,7 @@ export default {
 
 <template>
   <div
-    class="line collapsible-line d-flex justify-content-between"
+    class="log-line collapsible-line d-flex justify-content-between"
     role="button"
     @click="handleOnClick"
   >

app/assets/stylesheets/framework/job_log.scss

@@ -11,7 +11,7 @@
   background-color: $builds-trace-bg;
 }
 
-.line {
+.log-line {
   padding: 1px $gl-padding 1px $job-log-line-padding;
 }
 
@@ -40,7 +40,7 @@
   }
 }
 
-.duration {
+.log-duration-badge {
   background: $gl-gray-400;
 }
 

changelogs/unreleased/32408-fix-css-leak.yml

+---
+title: Fix CSS leak in job log
+merge_request:
+author:
+type: fixed