Improve overflow behavior of Timeline view

Summary:
For text like "MMM", make the right parts of the element scroll.

Also fixed a couple of 1px issues here and there.

Test Plan: Added, viewed UIExamples.

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D4152

src/applications/uiexample/examples/PhabricatorTimelineExample.php

@@ -71,6 +71,18 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
       ->appendChild('This event is green!')
       ->setColor(PhabricatorTransactions::COLOR_GREEN);
 
+    $events[] = id(new PhabricatorTimelineEventView())
+      ->setUserHandle($handle)
+      ->setTitle(str_repeat('Long Text Title ', 64))
+      ->appendChild(str_repeat('Long Text Body ', 64))
+      ->setColor(PhabricatorTransactions::COLOR_ORANGE);
+
+    $events[] = id(new PhabricatorTimelineEventView())
+      ->setUserHandle($handle)
+      ->setTitle(str_repeat('LongTextEventNoSpaces', 1024))
+      ->appendChild(str_repeat('LongTextNoSpaces', 1024))
+      ->setColor(PhabricatorTransactions::COLOR_RED);
+
     $colors = array(
       PhabricatorTransactions::COLOR_RED,
       PhabricatorTransactions::COLOR_ORANGE,

src/view/layout/PhabricatorTimelineEventView.php

@@ -197,7 +197,9 @@ final class PhabricatorTimelineEventView extends AphrontView {
         array(
           'class' => implode(' ', $title_classes),
         ),
-        $icon.$title.$extra);
+        $title.$extra);
+
+      $title = $icon.$title;
     }
 
     $wedge = phutil_render_tag(

webroot/rsrc/css/layout/phabricator-timeline-view.css

@@ -43,7 +43,7 @@
 }
 
 .phabricator-timeline-title {
-  line-height: 27px;
+  line-height: 28px;
   min-height: 28px;
   position: relative;
 }
@@ -86,14 +86,16 @@
 
 .phabricator-timeline-major-event .phabricator-timeline-title {
   background: #f7f7f7;
+  min-height: 29px;
 }
 
 .phabricator-timeline-title {
   padding: 0 5px;
+  overflow-x: auto;
 }
 
 .phabricator-timeline-title-with-icon {
-  padding-left: 36px;
+  padding-left: 33px;
 }
 
 .phabricator-timeline-major-event .phabricator-timeline-content
@@ -101,6 +103,11 @@
   padding: 10px 15px;
 }
 
+.phabricator-timeline-core-content {
+  overflow-x: auto;
+}
+
+
 .device .phabricator-timeline-event-view {
   min-height: 23px;
   position: relative;
@@ -125,8 +132,9 @@
   width: 30px;
   height: 30px;
   background-color: #c0c5d1;
-  top: -1px;
+  top: 0;
   left: -3px;
+  z-index: 3;
 }
 
 .phabricator-timeline-icon {