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

Style inline event items with titles containing long words properly..
8508be74 · Kjel Delaey · 6d91ee00 · 8508be74
Commit 8508be74 authored Nov 04, 2015 by Kjel Delaey
Hide whitespace changes
Inline Side-by-side

Showing with 7 additions and 0 deletions

events.scss app/assets/stylesheets/pages/events.scss +7 -0

No files found.
--- 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;