34768 Fix problem with issuable header wrapping when content is too long34768-fix-issuable-header-wrapping

5 files changed, 32 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index f1aedc227f3..a1755e32142 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -42,8 +42,7 @@
   &.avatar-inline {
     float: none;
     display: inline-block;
-    margin-left: 4px;
-    margin-bottom: 2px;
+    margin-left: 2px;
     flex-shrink: 0;
     -webkit-flex-shrink: 0;
 
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 3d9eff35583..538e50ee306 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -3,6 +3,7 @@
   border-bottom: 1px solid $border-color;
   color: $gl-text-color;
   line-height: 34px;
+  display: flex;
 
   a {
     color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7059a4cfe85..0df16da3c86 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -613,6 +613,8 @@
   float: none;
   display: inline-block;
   margin-top: 0;
+  height: auto;
+  align-self: center;
 
   @media (max-width: $screen-xs-max) {
     position: absolute;
@@ -626,6 +628,8 @@
   padding-left: 45px;
   padding-right: 45px;
   line-height: 35px;
+  display: flex;
+  flex-grow: 1;
 
   @media (min-width: $screen-sm-min) {
     float: left;
@@ -637,11 +641,12 @@
 .issuable-actions {
   @include new-style-dropdown;
 
-  padding-top: 10px;
+  align-self: center;
+  flex-shrink: 0;
+  flex: 0 0 auto;
 
   @media (min-width: $screen-sm-min) {
     float: right;
-    padding-top: 0;
   }
 }
 
@@ -655,8 +660,9 @@
 
 .issuable-meta {
   display: inline-block;
-  line-height: 18px;
   font-size: 14px;
+  line-height: 24px;
+  align-self: center;
 }
 
 .js-issuable-selector-wrap {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index e8ca5cedaee..8bb68ad2425 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -134,11 +134,24 @@ ul.related-merge-requests > li {
 }
 
 @media (max-width: $screen-xs-max) {
-  .issue-btn-group {
-    width: 100%;
+  .detail-page-header,
+  .issuable-header {
+    display: block;
+
+    .issuable-meta {
+      line-height: 18px;
+    }
+  }
 
-    .btn {
+  .issuable-actions {
+    margin-top: 10px;
+
+    .issue-btn-group {
       width: 100%;
+
+      .btn {
+        width: 100%;
+      }
     }
   }
 }
diff --git a/changelogs/unreleased/34768-fix-issuable-header-wrapping.yml b/changelogs/unreleased/34768-fix-issuable-header-wrapping.yml
new file mode 100644
index 00000000000..49195bd4168
--- /dev/null
+++ b/changelogs/unreleased/34768-fix-issuable-header-wrapping.yml
@@ -0,0 +1,5 @@
+---
+title: Fix problem with issuable header wrapping when content is too long
+merge_request:
+author:
+type: fixed