feat: make dirty indicator work in overflow menu

Author: devvaannsh

src/extensionsIntegrated/TabBar/overflow.js

@@ -113,8 +113,8 @@ define(function (require, exports, module) {
         const dropdown = new DropdownButton.DropdownButton("", hiddenTabs, function (item, index) {
             const iconHtml = item.$icon[0].outerHTML; // the file icon
             const dirtyHtml = item.isDirty
-                ? '<span class="tab-dirty-icon">•</span>'
-                : ''; // to display the dirty icon in the overflow menu
+                ? '<span class="tab-dirty-icon-overflow">•</span>'
+                : '<span class="tab-dirty-icon-overflow empty"></span>'; // adding an empty span for better alignment
 
             const closeIconHtml =
                 `<span class="tab-close-icon-overflow" data-tab-path="${item.path}" data-tab-index="${index}">
@@ -125,12 +125,14 @@ define(function (require, exports, module) {
             return {
                 html:
                     `<div class="dropdown-tab-item" data-tab-path="${item.path}">
-                        <span class="tab-icon-container">${iconHtml}</span>
-                        <span class="tab-name-container">${item.name}</span>
-                        ${dirtyHtml}
+                        <div class="tab-info-container">
+                            ${dirtyHtml}
+                            <span class="tab-icon-container">${iconHtml}</span>
+                            <span class="tab-name-container">${item.name}</span>
+                        </div>
                         ${closeIconHtml}
                     </div>`,
-                enabled: true  // make sure items are enabled
+                enabled: true
             };
         });
 

src/styles/Extn-TabBar.less

@@ -217,14 +217,20 @@
 .dropdown-tab-item {
     display: flex;
     align-items: center;
-    justify-content: flex-start;
     cursor: pointer;
+    justify-content: space-between;
 }
 
 .dropdown-tab-item:hover {
     background-color: #2A3B50;
 }
 
+.tab-info-container {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+}
+
 .tab-icon-container {
     margin-right: 0.25rem;
     display: inline-flex;
@@ -237,13 +243,18 @@
     text-overflow: ellipsis;
 }
 
-.tab-dirty-icon {
+.tab-dirty-icon-overflow {
     color: #8D8D8E;
-    font-size: 1.6rem;
+    font-size: 1.2rem;
+    width: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     margin-right: 0.25rem;
-    position: absolute;
-    left: 0.3rem;
-    top: 0.25rem;
+}
+
+.tab-dirty-icon-overflow.empty {
+    visibility: hidden;
 }
 
 .tab-close-icon-overflow {