Merge branch 'fl-job-log-bugs' into 'master'

Fixes the whitespace for titles

See merge request gitlab-org/gitlab!18572

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

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

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

@@ -21,8 +21,12 @@ export default {
 <template>
   <div class="js-line 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
-    }}</span>
+    <span
+      v-for="(content, i) in line.content"
+      :key="i"
+      :class="content.style"
+      class="ws-pre-wrap"
+      >{{ content.text }}</span
+    >
   </div>
 </template>

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

@@ -43,15 +43,19 @@ export default {
 
 <template>
   <div
-    class="log-line collapsible-line d-flex justify-content-between"
+    class="log-line collapsible-line d-flex justify-content-between ws-normal"
     role="button"
     @click="handleOnClick"
   >
     <icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
-    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
-      content.text
-    }}</span>
+    <span
+      v-for="(content, i) in line.content"
+      :key="i"
+      class="line-text w-100 ws-pre-wrap"
+      :class="content.style"
+      >{{ content.text }}</span
+    >
     <duration-badge v-if="duration" :duration="duration" />
   </div>
 </template>

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

@@ -48,7 +48,7 @@ export default {
 <template>
   <gl-link
     :id="lineNumberId"
-    class="d-inline-block text-right line-number"
+    class="d-inline-block text-right line-number flex-shrink-0"
     :href="buildLineNumber"
     >{{ parsedLineNumber }}</gl-link
   >

app/assets/javascripts/jobs/store/mutations.js

@@ -19,7 +19,7 @@ export default {
     state.isSidebarOpen = true;
   },
 
-  [types.RECEIVE_TRACE_SUCCESS](state, log) {
+  [types.RECEIVE_TRACE_SUCCESS](state, log = {}) {
     if (log.state) {
       state.traceState = log.state;
     }

app/assets/stylesheets/framework/common.scss

@@ -440,6 +440,7 @@ img.emoji {
 .flex-no-shrink { flex-shrink: 0; }
 .ws-initial { white-space: initial; }
 .ws-normal { white-space: normal; }
+.ws-pre-wrap { white-space: pre-wrap; }
 .overflow-auto { overflow: auto; }
 
 .d-flex-center {

app/assets/stylesheets/framework/job_log.scss

@@ -9,7 +9,6 @@
   border-radius: $border-radius-small;
   min-height: 42px;
   background-color: $builds-trace-bg;
-  white-space: pre-wrap;
 }
 
 .log-line {