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...

1 files changed, 7 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index dfb901652bf..d2ca106cc8d 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -11,9 +11,12 @@
   color: #7f8fa4;
 
   &.event-inline {
+    padding-left: $gl-padding + $gl-avatar-size;
+
     .avatar {
       position: relative;
       top: -2px;
+      margin-left: -$gl-avatar-size;
     }
 
     .event-title {
@@ -155,6 +158,10 @@
 
 @media (max-width: $screen-xs-max) {
   .event-item {
+    &.event-inline {
+      padding-left: $gl-padding;
+    }
+
     .event-title {
       white-space: normal;
       overflow: visible;