Show ellipsis for long paths in fuzzy finder

Previously the directory was shown after the file name
and it would wrap if too long causing inconsistent row
heights.

Now the full path is shown below the name in a smaller font
and both the path and file are set to overflow with an ellipsis.

src/packages/fuzzy-finder/lib/fuzzy-finder-view.coffee

@@ -59,9 +59,8 @@ class FuzzyFinderView extends SelectList
         else
           typeClass = 'text-name'
 
-        @span fsUtils.base(path), class: "file #{typeClass}"
-        if folder = project.relativize(fsUtils.directory(path))
-          @span " - #{folder}/", class: 'directory'
+        @div fsUtils.base(path), class: "file #{typeClass}"
+        @div project.relativize(path), class: 'path'
 
   openPath: (path) ->
     rootView.open(path, {@allowActiveEditorChange}) if path

src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee

@@ -137,13 +137,13 @@ describe 'FuzzyFinder', ->
           rootView.attachToDom()
           rootView.open 'sample-with-tabs.coffee'
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
-          expect(_.pluck(finderView.list.children('li'), 'outerText')).toEqual ['sample.txt', 'sample.js', 'sample-with-tabs.coffee']
+          expect(_.pluck(finderView.list.find('li > div.file'), 'outerText')).toEqual ['sample.txt', 'sample.js', 'sample-with-tabs.coffee']
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
 
           rootView.open 'sample.txt'
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
 
-          expect(_.pluck(finderView.list.children('li'), 'outerText')).toEqual ['sample-with-tabs.coffee', 'sample.js', 'sample.txt']
+          expect(_.pluck(finderView.list.find('li > div.file'), 'outerText')).toEqual ['sample-with-tabs.coffee', 'sample.js', 'sample.txt']
           expect(finderView.list.children().first()).toHaveClass 'selected'
 
         it "serializes the list of paths and their last opened time", ->
@@ -182,7 +182,7 @@ describe 'FuzzyFinder', ->
           rootView.open 'sample.js'
           rootView.getActivePane().splitRight()
           rootView.trigger 'fuzzy-finder:toggle-buffer-finder'
-          expect(_.pluck(finderView.list.children('li'), 'outerText')).toEqual ['sample.js']
+          expect(_.pluck(finderView.list.find('li > div.file'), 'outerText')).toEqual ['sample.js']
 
     describe "when a path selection is confirmed", ->
       [editor1, editor2] = []

src/packages/fuzzy-finder/stylesheets/fuzzy-finder.less

@@ -1,8 +1,21 @@
-.fuzzy-finder .directory {
+.fuzzy-finder {
+
+  &.select-list li {
+    padding: 5px 10px 5px 10px;
+  }
+
+  .path, .file {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.fuzzy-finder .path {
   color: rgba(0, 0, 0, 0.5);
-  word-break: break-word;
-  margin-left: 5px;
-  line-height: 150%;
+  margin-top: -2px;
+  margin-left: 26px;
+  font-size: .9em;
 }
 
 .fuzzy-finder .file:before {

static/overlay.less

@@ -40,4 +40,4 @@
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-}
+}

themes/atom-dark-ui/select-list.less

@@ -36,7 +36,7 @@
     }
 
     .right,
-    .directory {
+    .path {
       color: #777;
     }
 
@@ -45,7 +45,7 @@
     }
 
     .selected .right,
-    .selected .directory {
+    .selected .path {
       color: #ccc;
     }