Fix tooltip and truncation on incident list

Changelog: fixed

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -392,19 +392,24 @@ export default {
           </template>
 
           <template #cell(title)="{ item }">
-            <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
+            <div
+              :class="{
+                'gl-display-flex gl-align-items-center gl-max-w-full': item.state === 'closed',
+              }"
+            >
               <gl-link
-                v-gl-tooltip
-                :title="item.title"
                 data-testid="incident-link"
                 :href="showIncidentLink(item)"
+                class="gl-min-w-0"
               >
-                {{ item.title }}
+                <tooltip-on-truncate :title="item.title" class="gl-text-truncate gl-display-block">
+                  {{ item.title }}
+                </tooltip-on-truncate>
               </gl-link>
               <gl-icon
                 v-if="item.state === 'closed'"
                 name="issue-close"
-                class="gl-mx-1 gl-fill-blue-500 gl-flex-shrink-0"
+                class="gl-ml-2 gl-fill-blue-500 gl-flex-shrink-0"
                 :size="16"
                 data-testid="incident-closed"
               />

spec/frontend/incidents/components/incidents_list_spec.js

@@ -171,6 +171,7 @@ describe('Incidents List', () => {
 
       expect(link.text()).toBe(title);
       expect(link.attributes('href')).toContain(`issues/incident/${iid}`);
+      expect(link.find('.gl-text-truncate').exists()).toBe(true);
     });
 
     describe('Assignees', () => {
@@ -201,15 +202,14 @@ describe('Incidents List', () => {
 
     describe('Escalation status', () => {
       it('renders escalation status per row', () => {
-        expect(findEscalationStatus().length).toBe(mockIncidents.length);
-
-        const actualStatuses = findEscalationStatus().wrappers.map((status) => status.text());
-        expect(actualStatuses).toEqual([
-          'Triggered',
-          'Acknowledged',
-          'Resolved',
-          I18N.noEscalationStatus,
-        ]);
+        const statuses = findEscalationStatus().wrappers;
+        const expectedStatuses = ['Triggered', 'Acknowledged', 'Resolved', I18N.noEscalationStatus];
+
+        expect(statuses.length).toBe(mockIncidents.length);
+        statuses.forEach((status, index) => {
+          expect(status.text()).toEqual(expectedStatuses[index]);
+          expect(status.classes('gl-text-truncate')).toBe(true);
+        });
       });
 
       describe('when feature is disabled', () => {