Commit 24353036 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '34768-fix-issuable-header-wrapping' into 'master'

34768 Fix problem with issuable header wrapping when content is too long

Closes #34768

See merge request gitlab-org/gitlab-ce!15192
parents b22f4d2a 609d49bc
...@@ -42,8 +42,7 @@ ...@@ -42,8 +42,7 @@
&.avatar-inline { &.avatar-inline {
float: none; float: none;
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 2px;
margin-bottom: 2px;
flex-shrink: 0; flex-shrink: 0;
-webkit-flex-shrink: 0; -webkit-flex-shrink: 0;
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
color: $gl-text-color; color: $gl-text-color;
line-height: 34px; line-height: 34px;
display: flex;
a { a {
color: $gl-text-color; color: $gl-text-color;
......
...@@ -613,6 +613,8 @@ ...@@ -613,6 +613,8 @@
float: none; float: none;
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
height: auto;
align-self: center;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
position: absolute; position: absolute;
...@@ -626,6 +628,8 @@ ...@@ -626,6 +628,8 @@
padding-left: 45px; padding-left: 45px;
padding-right: 45px; padding-right: 45px;
line-height: 35px; line-height: 35px;
display: flex;
flex-grow: 1;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
float: left; float: left;
...@@ -637,11 +641,12 @@ ...@@ -637,11 +641,12 @@
.issuable-actions { .issuable-actions {
@include new-style-dropdown; @include new-style-dropdown;
padding-top: 10px; align-self: center;
flex-shrink: 0;
flex: 0 0 auto;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
float: right; float: right;
padding-top: 0;
} }
} }
...@@ -655,8 +660,9 @@ ...@@ -655,8 +660,9 @@
.issuable-meta { .issuable-meta {
display: inline-block; display: inline-block;
line-height: 18px;
font-size: 14px; font-size: 14px;
line-height: 24px;
align-self: center;
} }
.js-issuable-selector-wrap { .js-issuable-selector-wrap {
......
...@@ -134,11 +134,24 @@ ul.related-merge-requests > li { ...@@ -134,11 +134,24 @@ ul.related-merge-requests > li {
} }
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
.issue-btn-group { .detail-page-header,
width: 100%; .issuable-header {
display: block;
.issuable-meta {
line-height: 18px;
}
}
.btn { .issuable-actions {
margin-top: 10px;
.issue-btn-group {
width: 100%; width: 100%;
.btn {
width: 100%;
}
} }
} }
} }
......
---
title: Fix problem with issuable header wrapping when content is too long
merge_request:
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment