Merge branch 'issue-40190' into 'master'

Fix slash commands dropdown description

See merge request gitlab-org/gitlab-ce!16125

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>';

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;
   }
 

changelogs/unreleased/40190-fix-slash-commands-dropdown-description-mis-alignement-on-firefox.yml

+---
+title: "Fix slash commands dropdown description mis-alignment on Firefox"
+merge_request: 16125
+author: Maurizio De Santis
+type: fixed