Merge branch '24820-buttons-in-the-branches-page-are-stacking-on-top-of-each-other-depending-on-the-selected-filter' into 'master'

Resolve "Buttons in the "Branches" page are stacking on top of each other depending on the selected filter"

Closes #24820

See merge request !8074

app/assets/stylesheets/framework/nav.scss

@@ -256,6 +256,10 @@
     .nav-text,
     .nav-controls {
       width: auto;
+
+      @media (max-width: $screen-xs-max) {
+        width: 100%;
+      }
     }
   }
 

app/views/projects/branches/index.html.haml

@@ -3,7 +3,7 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .top-area
+  .top-area.adjust
     .nav-text
       Protected branches can be managed in project settings
 
@@ -12,7 +12,7 @@
         = search_field_tag :search, params[:search], { placeholder: 'Filter by branch name', id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown.inline
-        %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+        %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
           %span.light
             = projects_sort_options_hash[@sort]
           = icon('chevron-down')

changelogs/unreleased/24820-buttons-in-the-branches-page-are-stacking-on-top-of-each-other-depending-on-the-selected-filter.yml

@@ -0,0 +1,4 @@
+---
+title: fix button layout issue on branches page
+merge_request: 8074
+author: