From 9acaecac4a19c43c44c5eef8241e658073eec781 Mon Sep 17 00:00:00 2001
From: James Kiesel <james.kiesel@gmail.com>
Date: Wed, 23 Mar 2016 08:10:15 +1300
Subject: [PATCH] Fix for long emoji names in autocomplete

---
 .../templates/emoji-selector-autocomplete.raw.hbs         | 3 ++-
 app/assets/stylesheets/common/base/emoji.scss             | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs b/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs
index ac1f2a475..11a51ce6b 100644
--- a/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/emoji-selector-autocomplete.raw.hbs
@@ -4,7 +4,8 @@
       <li>
         <a href>
           {{#if option.src}}
-            <img src={{option.src}} class='emoji'> {{option.code}}
+            <img src={{option.src}} class='emoji'>
+            <span class='emoji-shortname'>{{option.code}}</span>
           {{else}}
             {{option.label}}
           {{/if}}
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index c11d96870..e97a2d186 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -100,3 +100,11 @@ table.emoji-page td {
 .emoji-modal .nav a {
   color: dark-light-choose(#333, #ccc);
 }
+
+.emoji-shortname {
+  display: inline-block;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  vertical-align: middle;
+}