Fix UI broken in line profiling modal due to Bootstrap 4

3 files changed, 7 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 667661d8b5c..ed5a1c91d8f 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -74,12 +74,6 @@ body.modal-open {
   }
 }
 
-@include media-breakpoint-up(lg) {
-  .modal-full {
-    width: 98%;
-  }
-}
-
 .modal {
   background-color: $black-transparent;
   z-index: 2100;
diff --git a/changelogs/unreleased/46999-line-profiling-modal-width.yml b/changelogs/unreleased/46999-line-profiling-modal-width.yml
new file mode 100644
index 00000000000..130f50d1ec0
--- /dev/null
+++ b/changelogs/unreleased/46999-line-profiling-modal-width.yml
@@ -0,0 +1,5 @@
+---
+title: Fix UI broken in line profiling modal due to Bootstrap 4
+merge_request: 19253
+author: Takuya Noguchi
+type: other
diff --git a/lib/peek/rblineprof/custom_controller_helpers.rb b/lib/peek/rblineprof/custom_controller_helpers.rb
index 7cfe76b7b71..da24a36603e 100644
--- a/lib/peek/rblineprof/custom_controller_helpers.rb
+++ b/lib/peek/rblineprof/custom_controller_helpers.rb
@@ -41,10 +41,10 @@ module Peek
             ]
           end.sort_by{ |a,b,c,d,e,f| -f }
 
-          output = "<div class='modal-dialog modal-full'><div class='modal-content'>"
+          output = "<div class='modal-dialog modal-lg'><div class='modal-content'>"
           output << "<div class='modal-header'>"
-          output << "<button class='close btn btn-link btn-sm' type='button' data-dismiss='modal'>X</button>"
           output << "<h4>Line profiling: #{human_description(params[:lineprofiler])}</h4>"
+          output << "<button class='close' type='button' data-dismiss='modal' aria-label='close'><span aria-hidden='true'>&times;</span></button>"
           output << "</div>"
           output << "<div class='modal-body'>"