Ellipse on editable dropdown for long values (#908)

* make dropdown ellipse for long database names

* remove unneeded code

src/sql/base/browser/ui/editableDropdown/dropdown.ts

@@ -176,7 +176,7 @@ export class Dropdown extends Disposable {
 			filter: this._filter,
 			renderer: this._renderer,
 			controller: this._controller
-		});
+		}, { paddingOnRow: false, indentPixels: 0, twistiePixels: 0 });
 
 		this.values = this._options.values;
 

src/sql/base/browser/ui/editableDropdown/dropdownTree.ts

@@ -14,6 +14,7 @@ import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 
 export interface Template {
 	label: HTMLElement;
+	row: HTMLElement;
 }
 
 export interface Resource {
@@ -33,17 +34,18 @@ export class DropdownRenderer implements tree.IRenderer {
 		return '';
 	}
 
-	public renderTemplate(tree: tree.ITree, templateId: string, container: HTMLElement) {
+	public renderTemplate(tree: tree.ITree, templateId: string, container: HTMLElement): Template {
 		const row = $('div.list-row').style('height', '22px').style('padding-left', '5px').getHTMLElement();
 		DOM.append(container, row);
 		const label = $('span.label').style('margin', 'auto').style('vertical-align', 'middle').getHTMLElement();
 		DOM.append(row, label);
 
-		return { label };
+		return { label, row };
 	}
 
 	public renderElement(tree: tree.ITree, element: Resource, templateId: string, templateData: Template): void {
 		templateData.label.innerText = element.value;
+		templateData.row.title = element.value;
 	}
 
 	public disposeTemplate(tree: tree.ITree, templateId: string, templateData: Template): void {

src/sql/base/browser/ui/editableDropdown/media/dropdownList.css

@@ -23,7 +23,19 @@
 }
 
 .dropdown-tree .list-row {
-	margin-left: -33px;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.dropdown-tree .content {
+	width: 100%;
+}
+
+.dropdown-tree .list-row .label {
+	width: 100%;
+	display: inline-block;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 .connection-input .dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {