Merge branch '238418-fix-approval-rules-bursting-layout' into 'master'

Make approval rule paths break line when needed

Closes #238418

See merge request gitlab-org/gitlab!39753

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue

@@ -46,7 +46,7 @@ export default {
           rules: orderBy(
             this.approvalRules
               .filter(rule => rule.rule_type === RULE_TYPE_CODE_OWNER)
-              .map(rule => ({ ...rule, nameClass: 'monospace' })),
+              .map(rule => ({ ...rule, nameClass: 'gl-font-monospace gl-word-break-all' })),
             [o => o.section === 'codeowners', 'name', 'section'],
             ['desc', 'asc', 'asc'],
           ),

ee/changelogs/unreleased/238418-fix-approval-rules-bursting-layout.yml

+---
+title: Fix Approval Rules table in Merge Requests bursting out of the layout in some
+  scenarios
+merge_request: 39753
+author:
+type: fixed

ee/spec/features/merge_request/user_sees_approval_widget_spec.rb

@@ -99,7 +99,7 @@ RSpec.describe 'Merge request > User sees approval widget', :js do
           click_on 'View eligible approvers'
           wait_for_requests
 
-          within('.mr-widget-workflow table .monospace') do
+          within('.mr-widget-workflow table .gl-font-monospace') do
             code_owner_row = find(:xpath, "//tr[td[contains(.,'#{code_owner_rule.name}')]]")
 
             expect(code_owner_row).to have_content('Optional')
@@ -123,7 +123,7 @@ RSpec.describe 'Merge request > User sees approval widget', :js do
             click_on 'View eligible approvers'
             wait_for_requests
 
-            within('.mr-widget-workflow table .monospace') do
+            within('.mr-widget-workflow table .gl-font-monospace') do
               code_owner_row = find(:xpath, "//tr[td[contains(.,'#{code_owner_rule.name}')]]")
 
               expect(code_owner_row).to have_content('0 of 1')

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_list_spec.js

@@ -350,7 +350,7 @@ describe('EE MRWidget approvals list', () => {
     it('renders the name in a monospace font', () => {
       const codeOwnerRow = findRowElement(row, 'name');
 
-      expect(codeOwnerRow.find('.monospace').exists()).toEqual(true);
+      expect(codeOwnerRow.find('.gl-font-monospace').exists()).toEqual(true);
       expect(codeOwnerRow.text()).toContain(rule.name);
     });