refactor: improve emmet code readability

Author: devvaannsh

src/extensions/default/CSSCodeHints/main.js

@@ -522,9 +522,10 @@ define(function (require, exports, module) {
                             }
 
                             const $emmetHintObj = $("<span>")
-                                .addClass("brackets-css-hints brackets-hints emmet-hint")
+                                .addClass("brackets-css-hints brackets-hints")
                                 .attr("data-val", expandedAbbr)
-                                .attr("data-isEmmet", true);
+                                .attr("data-isEmmet", true)
+                                .css("margin-right", "48px");
 
                             // for highlighting the already-typed characters
                             if (token.stringRanges) {

src/extensions/default/HTMLCodeHints/main.js

@@ -145,15 +145,15 @@ define(function (require, exports, module) {
     function formatEmmetHint(abbr) {
         // Create the main container for the hint
         var $hint = $("<span>")
-            .addClass("emmet-hint");
+            .css("margin-right", "48px");
 
         // Create a wrapper for the text content
         var $textContent = $("<span>")
             .addClass("emmet-text-content")
             .text(abbr);
 
         // style in brackets_patterns_override.less file
-        let $icon = $(`<span class="emmet-code-hint">Emmet</span>`);
+        let $icon = $(`<span class="emmet-html-code-hint">Emmet</span>`);
 
         // Append both text content and icon to the main container
         $hint.append($textContent);

src/styles/brackets_patterns_override.less

@@ -727,11 +727,11 @@ a:focus {
   }
 }
 
-.emmet-code-hint {
+.emmet-html-code-hint {
     visibility: hidden;
 }
 
-.codehint-menu .dropdown-menu li a.highlight .emmet-code-hint {
+.codehint-menu .dropdown-menu li a.highlight .emmet-html-code-hint {
     visibility: visible;
     position: absolute;
     right: 1rem;
@@ -744,10 +744,6 @@ a:focus {
     }
 }
 
-.emmet-hint {
-    margin-right: 48px !important;
-}
-
 .emmet-text-content {
     display: inline-block;
     max-width: 320px;