adjust styles

resource/css/_form.scss

@@ -144,11 +144,32 @@
 } // }}}
 
 // overwrite .CodeMirror-hints
-// FIXME: required because .content-main.on-edit has 'z-index:1050'
 .CodeMirror-hints {
+  // FIXME: required because .content-main.on-edit has 'z-index:1050'
   z-index: 1060 !important;
 
-  img.emojione {
-    width: 1.4em;
+  max-height: 30em !important;
+
+  .CodeMirror-hint.crowi-emoji-autocomplete {
+    font-family: $font-family-monospace-not-strictly;
+    line-height: 1.6em;
+
+    .img-container {
+      display: inline-block;
+      width: 30px;
+
+      img.emojione {
+        width: 1.6em;
+      }
+    }
+  }
+  // active line
+  .CodeMirror-hint-active.crowi-emoji-autocomplete {
+    .img-container {
+      font-size: 15px;  // adjust to .wiki
+      padding-top: 0.3em;
+      padding-bottom: 0.3em;
+    }
   }
+
 }

resource/css/_wiki.scss

@@ -145,11 +145,11 @@ div.body {
   }
 
   img.emojione {
-    width: 1.2em;
-    margin: 1px;
+    width: 1.6em;
+    margin-top: -0.3em !important;
+    margin-bottom: 0 !important;
     border: none;
     box-shadow: none;
-    vertical-align: text-bottom;
   }
 
   ul, ol {

resource/js/components/PageEditor/Editor.js

@@ -103,6 +103,7 @@ export default class Editor extends React.Component {
     // see https://codemirror.net/doc/manual.html#addon_show-hint
     cm.showHint({
       completeSingle: false,
+      // closeOnUnfocus: false,  // for debug
       hint: () => {
         const matched = cm.getDoc().getRange(sc.from(), sc.to());
         const term = matched.replace(':', '');  // remove ':' in the head
@@ -128,8 +129,11 @@ export default class Editor extends React.Component {
     return emojiShortnames.map((shortname) => {
       return {
         text: shortname,
+        className: 'crowi-emoji-autocomplete',
         render: (element) => {
-          element.innerHTML = `${this.emojiShortnameImageMap[shortname]} ${shortname}`;
+          element.innerHTML =
+            `<div class="img-container">${this.emojiShortnameImageMap[shortname]}</div>` +
+            `<span class="shortname-container">${shortname}</span>`;
         }
       }
     });