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

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;