Wrap epic header buttons on mobile

This also replaces <gl-deprecated-button> with <gl-button>

ee/app/assets/javascripts/epic/components/epic_header.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 
@@ -18,7 +18,7 @@ export default {
   },
   components: {
     GlIcon,
-    GlDeprecatedButton,
+    GlButton,
     UserAvatarLink,
     TimeagoTooltip,
     GitlabTeamMemberBadge: () =>
@@ -48,7 +48,7 @@ export default {
       // False positive css classes
       // https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/24
       // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `btn btn-grouped js-btn-epic-action qa-close-reopen-epic-button ${
+      return `js-btn-epic-action qa-close-reopen-epic-button ${
         this.isEpicOpen ? 'btn-close' : 'btn-open'
       }`;
     },
@@ -83,7 +83,7 @@ export default {
 </script>
 
 <template>
-  <div class="detail-page-header">
+  <div class="detail-page-header gl-flex-wrap gl-py-3">
     <div class="detail-page-header-body">
       <div
         :class="{ 'status-box-open': isEpicOpen, 'status-box-issue-closed': !isEpicOpen }"
@@ -115,32 +115,38 @@ export default {
         </strong>
       </div>
     </div>
-    <div class="detail-page-header-actions js-issuable-actions">
-      <gl-deprecated-button
+    <gl-button
+      :aria-label="__('Toggle sidebar')"
+      class="float-right gl-display-block d-sm-none gl-align-self-center gutter-toggle issuable-gutter-toggle js-sidebar-toggle"
+      type="button"
+      @click="toggleSidebar({ sidebarCollapsed })"
+    >
+      <i class="fa fa-angle-double-left"></i>
+    </gl-button>
+    <div
+      class="detail-page-header-actions gl-display-flex gl-flex-wrap gl-align-items-center gl-w-full gl-w-sm-auto js-issuable-actions"
+    >
+      <gl-button
         v-if="canUpdate"
         :loading="epicStatusChangeInProgress"
         :class="actionButtonClass"
+        category="secondary"
+        variant="warning"
+        class="gl-mt-3 gl-mt-sm-0 gl-w-full gl-w-sm-auto"
         @click="toggleEpicStatus(isEpicOpen)"
-        >{{ actionButtonText }}</gl-deprecated-button
       >
-
-      <gl-deprecated-button
+        {{ actionButtonText }}
+      </gl-button>
+      <gl-button
         v-if="userCanCreate"
-        class="btn btn-grouped btn-success btn-inverted js-new-epic-button"
         :href="newEpicWebUrl"
         data-testid="new-epic-button"
+        class="gl-mt-3 gl-mt-sm-0 gl-ml-sm-3 gl-w-full gl-w-sm-auto"
+        category="secondary"
+        variant="success"
       >
         {{ __('New epic') }}
-      </gl-deprecated-button>
+      </gl-button>
     </div>
-    <gl-deprecated-button
-      :aria-label="__('Toggle sidebar')"
-      variant="secondary"
-      class="float-right d-block d-sm-none gutter-toggle issuable-gutter-toggle js-sidebar-toggle"
-      type="button"
-      @click="toggleSidebar({ sidebarCollapsed })"
-    >
-      <i class="fa fa-angle-double-left"></i>
-    </gl-deprecated-button>
   </div>
 </template>

ee/app/assets/stylesheets/pages/epics.scss

@@ -72,7 +72,6 @@
     }
 
     .detail-page-header-actions {
-      width: auto;
       margin-top: 0;
     }
   }

ee/spec/frontend/epic/components/epic_header_spec.js

@@ -70,7 +70,7 @@ describe('EpicHeaderComponent', () => {
         vm.$store.state.state = statusType.open;
 
         expect(vm.actionButtonClass).toBe(
-          'btn btn-grouped js-btn-epic-action qa-close-reopen-epic-button btn-close',
+          'js-btn-epic-action qa-close-reopen-epic-button btn-close',
         );
       });
 
@@ -78,7 +78,7 @@ describe('EpicHeaderComponent', () => {
         vm.$store.state.state = statusType.close;
 
         expect(vm.actionButtonClass).toBe(
-          'btn btn-grouped js-btn-epic-action qa-close-reopen-epic-button btn-open',
+          'js-btn-epic-action qa-close-reopen-epic-button btn-open',
         );
       });
     });