Merge branch '25580-trucate-dropdown-for-long-branch' into 'master'

Resolves overflow of dropdown text for long branch name

Closes #25580

See merge request !8118

4 files changed, 42 insertions, 8 deletions

diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6
index 45c974b2b68..251f2ded347 100644
--- a/app/assets/javascripts/compare_autocomplete.js.es6
+++ b/app/assets/javascripts/compare_autocomplete.js.es6
@@ -55,6 +55,13 @@
           $('.dropdown-toggle-text', $dropdown).text(text);
           $dropdownContainer.removeClass('open');
         });
+
+        $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+          $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
+          if ($dropdown.hasClass('has-tooltip')) {
+            $dropdown.tooltip('fixTitle');
+          }
+        });
       });
     };
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index b99be02ab0c..4a1bc560292 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -26,7 +26,7 @@
       margin-bottom: 5px;
     }
 
-    &> .form-group {
+    & > .form-group {
       padding-left: 0;
     }
   }
@@ -73,7 +73,7 @@
       border: 1px solid $border-color;
     }
 
-    &+ .select2 a {
+    & + .select2 a {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -618,7 +618,6 @@ pre.light-well {
   margin: 0;
 }
 
-
 .activity-filter-block {
   .controls {
     padding-bottom: 7px;
@@ -811,7 +810,31 @@ pre.light-well {
 
 .compare-form-group {
   .dropdown-menu {
-    width: 300px;
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 300px;
+    }
+  }
+
+  + .compare-ellipsis {
+    width: 100%;
+    vertical-align: middle;
+    text-align: center;
+    margin-top: -20px;
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: auto;
+    }
+  }
+
+  .inline-input-group {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
   }
 }
 
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 7bde20c3286..9e1a532d0ba 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -7,16 +7,16 @@
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-          .dropdown-toggle-text= params[:from] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+          .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
       = render "ref_dropdown"
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-          .dropdown-toggle-text= params[:to] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+          .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
       = render "ref_dropdown"
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
diff --git a/changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml b/changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml
new file mode 100644
index 00000000000..18d3ac050ae
--- /dev/null
+++ b/changelogs/unreleased/25580-trucate-dropdown-for-long-branch.yml
@@ -0,0 +1,4 @@
+---
+title: Resolves overflow in compare branch and tags dropdown
+merge_request: 8118
+author: