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:
Kjel Delaey 2015-11-04 15:55:19 +01:00
parent 6d91ee0095
commit 8508be74d2

View file

@ -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;