Merge branch '40543-generalize-detail-page-headers' into 'master'

Generalize detail page headers (Issues, Merge Requests, Snippets)

Closes #40543

See merge request gitlab-org/gitlab-ce!15639

4 files changed, 39 insertions, 53 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index d30ff12bb59..a9c08df4f93 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -129,7 +129,7 @@ import { addDelimiter } from './lib/utils/text_utility';
     };
 
     MergeRequest.prototype.hideCloseButton = function() {
-      const el = document.querySelector('.merge-request .issuable-actions');
+      const el = document.querySelector('.merge-request .js-issuable-actions');
       const closeDropdownItem = el.querySelector('li.close-item');
       if (closeDropdownItem) {
         closeDropdownItem.classList.add('hidden');
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 538e50ee306..52e4d904b9b 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -13,6 +13,41 @@
   .author_link {
     white-space: nowrap;
   }
+
+  @media (max-width: $screen-xs-max) {
+    display: block;
+  }
+}
+
+.detail-page-header-body {
+  position: relative;
+  line-height: 35px;
+  display: flex;
+  flex-grow: 1;
+
+  @media (min-width: $screen-sm-min) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.detail-page-header-actions {
+  @include new-style-dropdown;
+
+  align-self: center;
+  flex-shrink: 0;
+  flex: 0 0 auto;
+
+  @media (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-top: 10px;
+
+    > .issue-btn-group {
+      > .btn {
+        width: 100%;
+      }
+    }
+  }
 }
 
 .detail-page-description {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b33825a506e..11ee1232bfe 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -624,50 +624,16 @@
   margin-top: 0;
   height: auto;
   align-self: center;
-
-  @media (max-width: $screen-xs-max) {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-.issuable-header {
-  position: relative;
-  padding-left: 45px;
-  padding-right: 45px;
-  line-height: 35px;
-  display: flex;
-  flex-grow: 1;
-
-  @media (min-width: $screen-sm-min) {
-    float: left;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.issuable-actions {
-  @include new-style-dropdown;
-
-  align-self: center;
-  flex-shrink: 0;
-  flex: 0 0 auto;
-
-  @media (min-width: $screen-sm-min) {
-    float: right;
-  }
 }
 
 .issuable-gutter-toggle {
   @media (max-width: $screen-sm-max) {
-    position: absolute;
-    top: 0;
-    right: 0;
+    margin-left: $btn-side-margin;
   }
 }
 
 .issuable-meta {
+  flex: 1;
   display: inline-block;
   font-size: 14px;
   line-height: 24px;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 8218326ae8f..af1df8b8802 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -134,26 +134,11 @@ ul.related-merge-requests > li {
 }
 
 @media (max-width: $screen-xs-max) {
-  .detail-page-header,
-  .issuable-header {
-    display: block;
-
+  .detail-page-header {
     .issuable-meta {
       line-height: 18px;
     }
   }
-
-  .issuable-actions {
-    margin-top: 10px;
-
-    .issue-btn-group {
-      width: 100%;
-
-      .btn {
-        width: 100%;
-      }
-    }
-  }
 }
 
 .issue-form {