diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index f10eaedcc04..7e30747963a 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -19,6 +19,17 @@
     }
   }
 
+  // leave enough space for the close icon
+  .modal-title {
+    &.mw-100,
+    &.w-100 {
+      // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here
+      // https://github.com/twbs/bootstrap/pull/26976
+      margin-right: -2rem;
+      padding-right: 2rem;
+    }
+  }
+
   .page-title {
     margin-top: 0;
   }
diff --git a/changelogs/unreleased/feature-flags-mvc.yml b/changelogs/unreleased/feature-flags-mvc.yml
new file mode 100644
index 00000000000..6a709f7cf07
--- /dev/null
+++ b/changelogs/unreleased/feature-flags-mvc.yml
@@ -0,0 +1,5 @@
+---
+title: Avoid close icon leaving the modal header
+merge_request: 21904
+author:
+type: changed