fix: close icon and pin icon not properly aligned

Author: devvaannsh

src/project/WorkingSetView.js

@@ -1223,6 +1223,21 @@ define(function (require, exports, module) {
         if ($fileStatusIcon) {
             ViewUtils.toggleClass($fileStatusIcon, "can-close", canClose && !isPinned);
             ViewUtils.toggleClass($fileStatusIcon, "pinned", isPinned);
+
+            // Update icon content based on state
+            if (isPinned) {
+                // Show thumbtack for pinned files
+                if ($fileStatusIcon.find(".fa-thumbtack").length === 0) {
+                    $fileStatusIcon.html("<i class='fa-solid fa-thumbtack'></i>");
+                }
+            } else if (canClose) {
+                // Show close icon for unpinned files on hover
+                if ($fileStatusIcon.find(".fa-times").length === 0) {
+                    $fileStatusIcon.html("<i class='fa-solid fa-times'></i>");
+                }
+            } else {
+                $fileStatusIcon.empty();
+            }
         }
 
         // Handle dirty indicator on RIGHT side

src/styles/brackets.less

@@ -1425,7 +1425,7 @@ a, img {
         display: block;
         height: 16px;
         line-height: 15px;
-        margin-left: 18px;
+        margin-left: 21px;
         padding: 3px 0 3px 0;
 
         cursor: default;
@@ -1601,40 +1601,28 @@ a, img {
 }
 
 .file-status-icon {
-    margin: 0 0 0 8px;
     position: absolute;
-    left: 0;
-    top: 0;
-
-    &.can-close:before,
-    &.pinned:before {
-        .unicode-icon-container;
-        color: rgba(255, 255, 255, 0.5);
-    }
-
-    &.can-close:before {
-        content: "\00D7";
-        line-height: 1.1em;
-    }
+    left: 8px;
+    top: 3px;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.5);
 
-    &.can-close:hover:before {
+    &:hover {
         color: rgba(255, 255, 255, 0.7);
     }
 
-    &.can-close:active:before {
+    &:active {
         color: rgba(255, 255, 255, 0.3);
     }
 
-    &.pinned:before {
-        content: "\f08d";
-        font-family: "Font Awesome 6 Free";
-        font-weight: 900;
+    &.pinned {
         font-size: 9px;
     }
-
-    &.pinned:hover:before {
-        color: rgba(255, 255, 255, 0.7);
-    }
 }
 
 .working-set-dirty-indicator {