From 8693c8f9c81a4e1f1ee99ca89e3f768c2bce6ab1 Mon Sep 17 00:00:00 2001
From: Igor Zhukov <igor.beatle@gmail.com>
Date: Thu, 19 Mar 2015 01:34:09 +0300
Subject: [PATCH] Improved autocomplete styles

---
 app/css/app.css            | 12 ++++++------
 app/css/desktop.css        |  4 +++-
 app/js/message_composer.js |  3 ++-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 7b44bbc0..881f7aa3 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -2189,13 +2189,13 @@ a.composer_emoji_btn:hover {
 
 .composer_dropdown {
   display: none;
-  /*max-width: 100%;*/
-  border-radius: 2px;
   padding: 6px 0;
-  border: 1px solid rgba(15, 60, 96, 0.2);
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
-  -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
-  box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
+  border: 0;
+  -webkit-box-shadow: 0px 1px 1px 0px rgba(60,75,87,0.27);
+  -moz-box-shadow: 0px 1px 1px 0px rgba(60,75,87,0.27);
+  box-shadow: 0px 1px 1px 0px rgba(60,75,87,0.27);
+  border-radius: 0;
+  margin-top: -5px;
 }
 
 .composer_dropdown > li > a {
diff --git a/app/css/desktop.css b/app/css/desktop.css
index c4da6b3f..c49c9f8b 100644
--- a/app/css/desktop.css
+++ b/app/css/desktop.css
@@ -410,7 +410,9 @@
   visibility : visible\9; /* Target only IE7 and IE8 with this hack */
   opacity    : 0.99;
 }
-
+.composer_emoji_tooltip {
+  z-index: 1001;
+}
 .composer_emoji_tooltip .nano > .nano-pane {
   background : rgba(255,255,255,0.0);
   right: -2px;
diff --git a/app/js/message_composer.js b/app/js/message_composer.js
index 49dbc29e..a0a050e2 100644
--- a/app/js/message_composer.js
+++ b/app/js/message_composer.js
@@ -1025,7 +1025,8 @@ MessageComposer.prototype.showMentionSuggestions = function (users) {
 MessageComposer.prototype.updatePosition = function () {
   var offset = (this.richTextareaEl || this.textareaEl).offset();
   var height = this.autoCompleteEl.outerHeight();
-  this.autoCompleteEl.css({top: offset.top - height, left: offset.left});
+  var width = (this.richTextareaEl || this.textareaEl).outerWidth();
+  this.autoCompleteEl.css({top: offset.top - height, left: offset.left, width: width - 2});
 }
 
 MessageComposer.prototype.hideSuggestions = function () {