Fix slash commands dropdown description

2 files changed, 15 insertions, 3 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index d918d80df8d..df20e1e9c88 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -57,12 +57,12 @@ class GfmAutoComplete {
       displayTpl(value) {
         if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
         // eslint-disable-next-line no-template-curly-in-string
-        let tpl = '<li>/${name}';
+        let tpl = '<li><span class="name">/${name}</span>';
         if (value.aliases.length > 0) {
-          tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
+          tpl += ' <small class="aliases">(or /<%- aliases.join(", /") %>)</small>';
         }
         if (value.params.length > 0) {
-          tpl += ' <small><%- params.join(" ") %></small>';
+          tpl += ' <small class="params"><%- params.join(" ") %></small>';
         }
         if (value.description !== '') {
           tpl += '<small class="description"><i><%- description %></i></small>';
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 6b07ffdbd61..938f5f49c09 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -192,6 +192,17 @@
   overflow-y: auto;
   overflow-x: hidden;
 
+  .name,
+  small.aliases,
+  small.params {
+    float: left;
+  }
+
+  small.aliases,
+  small.params {
+    padding: 2px 5px;
+  }
+
   small.description {
     float: right;
     padding: 3px 5px;
@@ -209,6 +220,7 @@
   }
 
   ul > li {
+    @include clearfix;
     white-space: nowrap;
   }