From f2644cd622c37f2a2cd97890e4db47511025825c Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 19 Nov 2018 14:37:04 +0100
Subject: [PATCH] Textmodule widget: dynamically increase width

Only use as much space as needed but allow the dropdown to grow as big as possible (textarea width) to show as much as possible of the text module name.
---
 .../app/lib/base/jquery.textmodule.js         | 23 ++++++++++++-------
 app/assets/stylesheets/zammad.scss            |  1 +
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/app/lib/base/jquery.textmodule.js b/app/assets/javascripts/app/lib/base/jquery.textmodule.js
index 4a2891050..a7503b891 100644
--- a/app/assets/javascripts/app/lib/base/jquery.textmodule.js
+++ b/app/assets/javascripts/app/lib/base/jquery.textmodule.js
@@ -20,15 +20,14 @@
 
     this.options    = $.extend({}, defaults, options)
 
-    this._defaults  = defaults
-    this._name      = pluginName
+    this._defaults   = defaults
+    this._name       = pluginName
+    this._fixedWidth = true
 
     this.collection = []
     this.active     = false
     this.buffer     = ''
 
-    this._width = 380
-
     // check if ce exists
     if ( $.data(element, 'plugin_ce') ) {
       this.ce = $.data(element, 'plugin_ce')
@@ -194,6 +193,7 @@
 
   // create base template
   Plugin.prototype.renderBase = function() {
+    this.untouched = true
     this.$element.after('<div class="shortcut dropdown"><ul class="dropdown-menu" style="max-height: 200px;"></ul></div>')
     this.$widget = this.$element.next()
     this.$widget.on('mousedown', 'li', $.proxy(this.onEntryClick, this))
@@ -209,19 +209,19 @@
     var top            = -( widgetHeight + height ) + this._position.top
     var start          = this._position.left - 6
     var availableWidth = this.$element.innerWidth()
+    var width          = this.$widget.find('.dropdown-menu').width()
 
     if(rtl){
       start = availableWidth - start
     }
 
     // position the element further left if it would break out of the textarea width
-    if (start + this._width > availableWidth) {
-      start = this.$element.innerWidth() - this._width
+    if (start + width > availableWidth) {
+      start = availableWidth - width
     }
 
     var css = {
-      top: top,
-      width: this._width
+      top: top
     }
 
     css[rtl ? 'right' : 'left'] = start
@@ -417,6 +417,13 @@
     }
 
     this.$widget.find('ul').append(elements).scrollTop(9999)
+
+    // keep the width of the dropdown the same even when longer items got filtered out
+    if(this._fixedWidth && this.untouched){
+      this.$widget.find('ul').css('width', this.$widget.find('ul').width());
+      this.untouched = false;
+    }
+
     this.movePosition()
   }
 
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 7ed2cd10b..d2a249cf2 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -5188,6 +5188,7 @@ footer {
   overflow: auto;
   position: absolute;
   max-width: 100%;
+  min-width: 0;
 }
 
 .editControls {