fix: description showing at the side of the snippet instead of bottom

Author: devvaannsh

src/extensionsIntegrated/CustomSnippets/src/helper.js

@@ -123,7 +123,7 @@ define(function (require, exports, module) {
      */
     function createHintItem(abbr, query, description) {
         var $hint = $("<span>")
-            .addClass("brackets-css-hints brackets-hints")
+            .addClass("brackets-css-hints brackets-hints custom-snippets-hint")
             .attr("data-val", abbr)
             .attr("data-isCustomSnippet", true);
 
@@ -148,14 +148,12 @@ define(function (require, exports, module) {
             $hint.text(abbr);
         }
 
-        // style in brackets_patterns_override.less file
-        // using the same style as the emmet one
+        // the codehints related style is written in brackets_patterns_override.less file
         let $icon = $(`<a href="#" class="custom-snippet-code-hint" style="text-decoration: none">Snippet</a>`);
         $hint.append($icon);
 
         if (description && description.trim() !== "") {
-            // gave this the same class as the jshint-jsdoc to make sure that the styling is consistent
-            const $desc = $(`<span class="jshint-jsdoc">${description.trim()}</span>`);
+            const $desc = $(`<span class="snippet-description">${description.trim()}</span>`);
             $hint.append($desc);
         }
 

src/styles/brackets_patterns_override.less

@@ -761,6 +761,35 @@ a:focus {
     }
 }
 
+.custom-snippets-hint {
+    min-width: 200px !important;
+    max-width: 350px !important;
+    display: inline-block !important;
+}
+
+.snippet-description {
+    display: none;
+    color: grey;
+    word-wrap: break-word;
+    white-space: normal;
+    max-height: 2.2em;
+    overflow: hidden;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    line-height: 1em;
+    padding-top: 2px !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    .dark & {
+        color: #ccc;
+    }
+}
+
+.highlight .snippet-description {
+    display: block;
+}
+
 #codehint-desc {
 	background: @bc-codehint-desc;
 	position: absolute;