Make autocomplete wide enough to not scroll

src/packages/autocomplete/lib/autocomplete-view.coffee

@@ -1,3 +1,4 @@
+$ = require 'jquery'
 {$$} = require 'space-pen'
 Range = require 'range'
 SelectList = require 'select-list'
@@ -22,7 +23,8 @@ class AutocompleteView extends SelectList
 
   itemForElement: (match) ->
     $$ ->
-      @li match.word
+      @li =>
+        @span match.word
 
   handleEvents: ->
     @editor.on 'editor:path-changed', => @setCurrentBuffer(@editor.getBuffer())
@@ -156,7 +158,15 @@ class AutocompleteView extends SelectList
 
     {prefix, suffix}
 
+  afterAttach: (onDom) ->
+    if onDom
+      widestCompletion = 0
+      @list.find('span').each ->
+        widestCompletion = Math.max(widestCompletion, $(this).outerWidth())
+      @list.width(widestCompletion)
+      @width(@list.outerWidth())
+
   populateList: ->
-    super()
+    super
 
     @setPosition()

src/packages/autocomplete/spec/autocomplete-spec.coffee

@@ -416,3 +416,12 @@ describe "AutocompleteView", ->
 
       editor.trigger 'core:move-up'
       expect(editor.getCursorBufferPosition().row).toBe 0
+
+  it "sets the width of the view to be wide enough to contain the longest completion without scrolling", ->
+    editor.attachToDom()
+    editor.insertText('thisIsAReallyReallyReallyLongCompletion ')
+    editor.moveCursorToBottom()
+    editor.insertNewline
+    editor.insertText('t')
+    autocomplete.attach()
+    expect(autocomplete.list.prop('scrollWidth')).toBe autocomplete.list.width()

src/packages/autocomplete/stylesheets/autocomplete.less

@@ -8,3 +8,15 @@
   overflow-y: scroll;
   max-height: 200px;
 }
+
+.select-list.autocomplete ol li {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.autocomplete span {
+  padding-left: 5px;
+  padding-right: 5px;
+}