From ee7a90184b4e8afed41b09345e734be85edbeda9 Mon Sep 17 00:00:00 2001
From: Kevin Sawicki <kevin@github.com>
Date: Thu, 11 Apr 2013 14:18:22 -0700
Subject: [PATCH] Make autocomplete wide enough to not scroll

---
 .../autocomplete/lib/autocomplete-view.coffee      | 14 ++++++++++++--
 .../autocomplete/spec/autocomplete-spec.coffee     |  9 +++++++++
 .../autocomplete/stylesheets/autocomplete.less     | 12 ++++++++++++
 static/popover-list.less                           |  3 ++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/packages/autocomplete/lib/autocomplete-view.coffee b/src/packages/autocomplete/lib/autocomplete-view.coffee
index e559e7a97..5fd19d29e 100644
--- a/src/packages/autocomplete/lib/autocomplete-view.coffee
+++ b/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()
diff --git a/src/packages/autocomplete/spec/autocomplete-spec.coffee b/src/packages/autocomplete/spec/autocomplete-spec.coffee
index 0bc25a3f0..f91cfb16b 100644
--- a/src/packages/autocomplete/spec/autocomplete-spec.coffee
+++ b/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()
diff --git a/src/packages/autocomplete/stylesheets/autocomplete.less b/src/packages/autocomplete/stylesheets/autocomplete.less
index 9142f6a5e..1c7a332e7 100644
--- a/src/packages/autocomplete/stylesheets/autocomplete.less
+++ b/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;
+}
diff --git a/static/popover-list.less b/static/popover-list.less
index 005b4a36a..4d33416e9 100644
--- a/static/popover-list.less
+++ b/static/popover-list.less
@@ -1,5 +1,6 @@
 .select-list.popover-list {
   width: 200px;
+  min-width: 200px;
   border: 2px solid #222;
   -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, .5);
   margin-left: 0px;
@@ -14,4 +15,4 @@
 
 .select-list.popover-list ol li {
   padding: 5px;
-}
\ No newline at end of file
+}