diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue
index 8f060c24aa2049b4f9aad80d2b0577abdd97e994..e05d7536cd7386546ef4ba35cb285299018f0a47 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue
+++ b/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'],
           ),
diff --git a/ee/changelogs/unreleased/238418-fix-approval-rules-bursting-layout.yml b/ee/changelogs/unreleased/238418-fix-approval-rules-bursting-layout.yml
new file mode 100644
index 0000000000000000000000000000000000000000..646ea549860fb614ec128e85feb1415ed248191a
--- /dev/null
+++ b/ee/changelogs/unreleased/238418-fix-approval-rules-bursting-layout.yml
@@ -0,0 +1,6 @@
+---
+title: Fix Approval Rules table in Merge Requests bursting out of the layout in some
+  scenarios
+merge_request: 39753
+author:
+type: fixed
diff --git a/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb b/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
index 975403ffb256d6cf1e8124473eb89d3bde8f6c8a..61ed003f174ec744e08a52d4cf662887180eaa70 100644
--- a/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
+++ b/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
@@ -99,7 +99,7 @@
           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 @@
             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')
diff --git a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_list_spec.js b/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_list_spec.js
index ed40052de03e64bfa35d6271fd9a7d08d9782310..5f2ef97906576955ca6fe66416ec0306728051f1 100644
--- a/ee/spec/frontend/vue_mr_widget/components/approvals/approvals_list_spec.js
+++ b/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);
     });