From 4a3d50bcb56df541dc3bed327bb9b423bfc2ce61 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Tue, 11 Dec 2012 14:02:51 -0800
Subject: [PATCH] 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
---
 .../examples/PhabricatorTimelineExample.php        | 12 ++++++++++++
 src/view/layout/PhabricatorTimelineEventView.php   |  4 +++-
 .../rsrc/css/layout/phabricator-timeline-view.css  | 14 +++++++++++---
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/applications/uiexample/examples/PhabricatorTimelineExample.php b/src/applications/uiexample/examples/PhabricatorTimelineExample.php
index 903a074407..0e4813dcc6 100644
--- a/src/applications/uiexample/examples/PhabricatorTimelineExample.php
+++ b/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,
diff --git a/src/view/layout/PhabricatorTimelineEventView.php b/src/view/layout/PhabricatorTimelineEventView.php
index cfd4b4af9a..7ee899cd53 100644
--- a/src/view/layout/PhabricatorTimelineEventView.php
+++ b/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(
diff --git a/webroot/rsrc/css/layout/phabricator-timeline-view.css b/webroot/rsrc/css/layout/phabricator-timeline-view.css
index 472c424843..1521c85310 100644
--- a/webroot/rsrc/css/layout/phabricator-timeline-view.css
+++ b/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 {