1 files changed, 50 insertions, 23 deletions
diff --git a/app/views/shared/milestones/_header.html.haml b/app/views/shared/milestones/_header.html.haml
index 900c71675d9..3413d6ff399 100644
--- a/app/views/shared/milestones/_header.html.haml
+++ b/app/views/shared/milestones/_header.html.haml
@@ -1,30 +1,57 @@
-.detail-page-header.milestone-page-header
-  = gl_badge_tag milestone_status_string(milestone), { variant: milestone_badge_variant(milestone) }, { class: 'gl-mr-3' }
+.detail-page-header
+  .detail-page-header-body.gl-flex-wrap
+    = gl_badge_tag milestone_status_string(milestone), { variant: milestone_badge_variant(milestone) }, { class: 'gl-mr-3' }
 
-  .header-text-content
-    %span.identifier
-      %strong
-        = _('Milestone')
-    - if milestone.due_date || milestone.start_date
-      = milestone_date_range(milestone)
-
-  .milestone-buttons
-    - if can?(current_user, :admin_milestone, @group || @project)
-      = render Pajamas::ButtonComponent.new(href: edit_milestone_path(milestone), button_options: { class: 'btn-grouped' }) do
-        = _('Edit')
-
-      - if milestone.project_milestone? && milestone.project.group
-        = render Pajamas::ButtonComponent.new(button_options: { class: 'js-promote-project-milestone-button btn-grouped', data: { milestone_title: milestone.title, group_name: milestone.project.group.name, url: promote_project_milestone_path(milestone.project, milestone) }, disabled: true }) do
-          = _('Promote')
-        #promote-milestone-modal
+    .header-text-content
+      %span.identifier
+        %strong
+          = _('Milestone')
+      - if milestone.due_date || milestone.start_date
+        = milestone_date_range(milestone)
+      = render Pajamas::ButtonComponent.new(icon: 'chevron-double-lg-left', button_options: { 'aria-label' => _('Toggle sidebar'), class: 'btn-grouped gl-float-right! gl-sm-display-none js-sidebar-toggle' })
 
+  - if can?(current_user, :admin_milestone, @group || @project)
+    .milestone-buttons.detail-page-header-actions.gl-display-flex.gl-align-self-start
       - if milestone.active?
-        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :close }), method: :put, button_options: { class: 'btn-grouped btn-close' }) do
+        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :close }), method: :put, button_options: { class: 'btn-close gl-display-none gl-md-display-inline-block' }) do
           = _('Close milestone')
       - else
-        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :activate }), method: :put, button_options: { class: 'btn-grouped' }) do
+        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :activate }), method: :put, button_options: { class: 'gl-display-none gl-md-display-inline-block' }) do
           = _('Reopen milestone')
 
-      = render 'shared/milestones/delete_button'
-
-    = render Pajamas::ButtonComponent.new(icon: 'chevron-double-lg-left', button_options: { 'aria-label' => _('Toggle sidebar'), class: 'btn-grouped gl-float-right! gl-sm-display-none js-sidebar-toggle' })
+      .btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-dropdown.gl-md-w-auto.gl-w-full
+        = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret has-tooltip gl-display-none! gl-md-display-inline-flex!", data: { toggle: 'dropdown', title: _('Milestone actions'), testid: 'milestone-actions', 'aria-label': _('Milestone actions') }, aria: { label: _('Milestone actions') } do
+          = sprite_icon "ellipsis_v", size: 16, css_class: "dropdown-icon gl-icon"
+        = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md btn-block gl-button gl-dropdown-toggle gl-md-display-none!", data: { 'toggle' => 'dropdown' } do
+          %span.gl-dropdown-button-text= _('Milestone actions')
+          = sprite_icon "chevron-down", size: 16, css_class: "dropdown-icon gl-icon"
+        .dropdown-menu.dropdown-menu-right
+          .gl-dropdown-inner
+            .gl-dropdown-contents
+              %ul
+                %li.gl-dropdown-item
+                  = link_to edit_milestone_path(milestone), class: 'menu-item' do
+                    .gl-dropdown-item-text-wrapper
+                      = _('Edit')
+                - if milestone.project_milestone? && milestone.project.group
+                  %li.gl-dropdown-item
+                    %button.gl-button.btn.btn-link.menu-item.js-promote-project-milestone-button{ data: { milestone_title: milestone.title,
+                      group_name: milestone.project.group.name,
+                      url: promote_project_milestone_path(milestone.project, milestone)},
+                      disabled: true,
+                      type: 'button' }
+                      .gl-dropdown-item-text-wrapper
+                        = _('Promote')
+                    #promote-milestone-modal
+                - if milestone.active?
+                  %li.gl-dropdown-item{ class: "gl-md-display-none!" }
+                    = link_to update_milestone_path(milestone, { state_event: :close }), method: :put, class: 'menu-item' do
+                      .gl-dropdown-item-text-wrapper
+                        = _('Close milestone')
+                - else
+                  %li.gl-dropdown-item{ class: "gl-md-display-none!" }
+                    = link_to update_milestone_path(milestone, { state_event: :activate }), method: :put, class: 'menu-item' do
+                      .gl-dropdown-item-text-wrapper
+                        = _('Reopen milestone')
+                %li.gl-dropdown-item
+                  = render 'shared/milestones/delete_button'