fix: give max-width to emmet for html so that it doesn't cover up the whole screen

Author: devvaannsh

src/extensions/default/HTMLCodeHints/main.js

@@ -143,15 +143,20 @@ define(function (require, exports, module) {
      * @returns {jQuery} - A jQuery element representing the formatted hint.
      */
     function formatEmmetHint(abbr) {
-        // Create the main container for the hint text.
+        // Create the main container for the hint
         var $hint = $("<span>")
-            .addClass("emmet-hint")
+            .addClass("emmet-hint");
+
+        // 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>`);
 
-        // Append the icon to the hint element
+        // Append both text content and icon to the main container
+        $hint.append($textContent);
         $hint.append($icon);
 
         return $hint;

src/styles/brackets_patterns_override.less

@@ -602,7 +602,9 @@ a:focus {
     .dropdown-menu {
         box-shadow: 0 3px 9px @bc-shadow;
         max-height: 160px;
+        max-width: 400px;
         overflow-y: auto;
+        overflow-x: hidden;
         padding: 0;
 
         .dark & {
@@ -748,6 +750,16 @@ a:focus {
     margin-right: 48px !important;
 }
 
+.emmet-text-content {
+    display: inline-block;
+    max-width: 320px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+    line-height: inherit;
+}
+
 #codehint-desc {
 	background: @bc-codehint-desc;
 	position: absolute;