Style inline event items with titles containing long words properly..
On a tablet in portrait mode with a width of 768px the event-title isn't aligned properly when the title contains a long string. This also happens when resizing your browser viewport on a desktop. Example string: Administrator pushed new branch feature-branch-with-a-very-long-name at Gitlab Org / Gitlab Test In the UI it would look like the example below: ---------- | | | AVATAR | less than a minute ago | | ---------- Administrator pushed new branch feature-branch-with-a-very-long-name at...
This commit is contained in:
parent
6d91ee0095
commit
8508be74d2
1 changed files with 7 additions and 0 deletions
|
@ -11,9 +11,12 @@
|
||||||
color: #7f8fa4;
|
color: #7f8fa4;
|
||||||
|
|
||||||
&.event-inline {
|
&.event-inline {
|
||||||
|
padding-left: $gl-padding + $gl-avatar-size;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
|
margin-left: -$gl-avatar-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-title {
|
.event-title {
|
||||||
|
@ -155,6 +158,10 @@
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
@media (max-width: $screen-xs-max) {
|
||||||
.event-item {
|
.event-item {
|
||||||
|
&.event-inline {
|
||||||
|
padding-left: $gl-padding;
|
||||||
|
}
|
||||||
|
|
||||||
.event-title {
|
.event-title {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
Loading…
Reference in a new issue