Merge branch 'fix-job-name-overflow' into 'master'

Fix job name overflow in Firefox, Safari and IE

Closes #56426

See merge request gitlab-org/gitlab-ce!24707

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

@@ -110,7 +110,7 @@ export default {
     <div class="sidebar-container">
       <div class="blocks-container">
         <div class="block d-flex flex-nowrap align-items-center">
-          <h4 class="my-0 mr-2">{{ job.name }}</h4>
+          <h4 class="my-0 mr-2 text-break-word">{{ job.name }}</h4>
           <div class="flex-grow-1 flex-shrink-0 text-right">
             <gl-link
               v-if="job.retry_path"

app/assets/stylesheets/framework/common.scss

@@ -48,6 +48,10 @@
   color: $brand-info;
 }
 
+.text-break-word {
+  word-break: break-all;
+}
+
 .hint { font-style: italic; color: $gl-gray-400; }
 .light { color: $gl-text-color; }