From 3ffef7fe56d70038c2268bca63109d7f86521ff6 Mon Sep 17 00:00:00 2001
From: Shane Kilkelly <shane@kilkelly.me>
Date: Tue, 1 Aug 2017 13:40:30 +0100
Subject: [PATCH] Dynamically adjust the width of autocomplete popup.

---
 .../auto-complete/AutoCompleteManager.coffee        | 13 ++++++++++++-
 services/web/public/stylesheets/app/editor.less     |  4 ----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.coffee
index 7cc89c785a..348fe32f6b 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor/auto-complete/AutoCompleteManager.coffee
@@ -282,7 +282,18 @@ define [
 						editor.completer.autoSelect = true
 						editor.completer.showPopup(editor)
 						editor.completer.cancelContextMenu()
-						$(editor.completer.popup?.container).css({'font-size': @$scope.fontSize + 'px'})
+						container = $(editor.completer.popup?.container)
+						container.css({'font-size': @$scope.fontSize + 'px'})
+						# Dynamically set width of autocomplete popup
+						if filtered = editor?.completer?.completions?.filtered
+							longestCaption = _.max(filtered.map( (c) -> c.caption.length ))
+							longestMeta = _.max(filtered.map( (c) -> c.meta.length ))
+							charScale = @$scope.fontSize * 0.7
+							width = Math.min(
+								Math.round(longestCaption*charScale + longestMeta*charScale + 25),
+								700
+							)
+							container.css({width: "#{width}px"})
 						if editor.completer?.completions?.filtered?.length == 0
 							editor.completer.detach()
 					bindKey: "Ctrl-Space|Ctrl-Shift-Space|Alt-Space"
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 979bdd2bf6..aae2ecdc9f 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -505,7 +505,3 @@
 	border-bottom: 1px solid @modal-header-border-color;
 }
 
-// Widen autocomplete popup
-.ace_autocomplete {
-	width: 380px !important;
-}