Improved autocomplete styles

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 {

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;

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 () {